Форум Сайтостроение Веб-строительство

Появление плавающего блока не с самого верха а только при прокрутке страницы

WebMage
На сайте с 17.08.2011
Offline
142
WebMage
969

Делаю сайт, где есть 4 странички, на каждой из этих страниц ставлю код плавающего блока с картинкой, чтобы для человека читающего текст, визуально был виден предмет о котором он читает.

вот сам код:

<!DOCTYPE html>
<html>
 <head>
  <meta charset="utf-8">
  <title>предмет 1</title>
  <style>
   .banner-1 {
    position: fixed; /* Фиксированное положение */
    left: 10px; /* Расстояние от левого края окна браузера */
    top: 20%; /* Расстояние сверху */
    padding: 2px; /* Поля вокруг */
   }
  </style>
 </head>
 <body>
  <div class="banner-1"><img src="/wp-content/uploads/2018/08/1_home-2.png" alt="Предмет 1"></div>
 </body>
</html>

Помогите, подскажите пожалуйста, как модифицировать код, для того чтобы плавающая картинка появлялась например когда человек сделает прокрутку страницы вниз.

Samail
На сайте с 10.05.2007
Offline
361
Samail
#1 


<!DOCTYPE html>
<html>
 <head>
  <meta charset="utf-8">
  <title>предмет 1</title>
  <script src="https://code.jquery.com/jquery-3.1.0.js"></script>
  <script>
  $(window).scroll(function (event) {
    var top = $(window).scrollTop();
    var height = $(document).height();
     if(top >= height * 0.2){
   $('.banner-1').css( "display","block" );
     } else {
     $('.banner-1').css( "display","none" );
     }
});
  </script>
 <style>
   .banner-1 {
    position: fixed; /* Фиксированное положение */
    left: 10px; /* Расстояние от левого края окна браузера */
    top: 20%; /* Расстояние сверху */
    padding: 2px; /* Поля вокруг */
   display: none;
   }
  </style>
 </head>
 <body>
  <div class="banner-1"><img src="/wp-content/uploads/2018/08/1_home-2.png" alt="Предмет 1"></div>
 </body>
</html>

В данном случае появляется при прокрутке вниз на 20% от высоты страницы - (height * 0.2).

K
На сайте с 08.04.2010
Offline
89
Kasperaitus
#2

https://jsfiddle.net/26wgrm18/11/

WebMage
На сайте с 17.08.2011
Offline
142
WebMage
#3

Спасибо, попробовал оба варианта, в первом случае всё как надо работает, только вёрстка слетела странички там видимо из за скрипта, второй вариант не сработал (хотя скорее всего я неправильно его применил). Завтра буду допиливать, отпишусь.

Шаблон ещё мудрый, показать нет возможности пока на публику, не моё ))

K
На сайте с 08.04.2010
Offline
89
Kasperaitus
#4
WebMage:
Спасибо, попробовал оба варианта, в первом случае всё как надо работает, только вёрстка слетела странички там видимо из за скрипта, второй вариант не сработал (хотя скорее всего я неправильно его применил).

Решения, по сути, одинаковы. В моем случае, наверное не подключили библиотеку jquery. DIV с классом content я добавил для примера, вам он не нужен.

Если поползла верстка, попробуйте в примере от Samail заменить "display","block" на "display","inline-block"

Ну или в условии поменяйте 

if(top >= height * 0.2){

   $('.banner-1').fadeIn();

     } else {

     $('.banner-1').fadeOut();

     }
WebMage
На сайте с 17.08.2011
Offline
142
WebMage
#5
Kasperaitus:
Решения, по сути, одинаковы. В моем случае, наверное не подключили библиотеку jquery. DIV с классом content я добавил для примера, вам он не нужен.
Если поползла верстка, попробуйте в примере от Samail заменить "display","block" на "display","inline-block"

Ну или в условии поменяйте 
if(top >= height * 0.2){

   $('.banner-1').fadeIn();

     } else {

     $('.banner-1').fadeOut();

     }

Спасибо! Сделал, заказчику понравилось. потом как сайт откроем, кину сюда ссылку посмотреть ))

Авторизуйтесь или зарегистрируйтесь, чтобы оставить комментарий