Javascript-форум (https://javascript.ru/forum/)
-   Общие вопросы Javascript (https://javascript.ru/forum/misc/)
-   -   Появление/исчезновение элемента при прокрутке страницы JQuery (https://javascript.ru/forum/misc/44239-poyavlenie-ischeznovenie-ehlementa-pri-prokrutke-stranicy-jquery.html)

0leg9 12.01.2014 16:37
Появление/исчезновение элемента при прокрутке страницы JQuery
 
Нужно было, чтобы при прокрутке страницы вниз на 200px появлялся новый элемент с идентификатором hid, сделал так:
$(document).ready(function(){
        $(window).scroll(function(){
            var bo = $("body").scrollTop();
		if ( bo > 200 ) $("#hid").animate({'opacity':'1'},500);
        })
    })

Теперь нужно сделать, чтобы при прокрутке обратно этот элемент исчезал. Такая конструкция не работает:
if ( bo < 200 ) $("#hid").animate({'opacity':'0'},500);

0leg9 12.01.2014 16:58
Хм, если использовать не .animate, а .css, то все работает
$(document).ready(function(){
        $(window).scroll(function(){
            var bo = $("body").scrollTop();
            $('#hid').text(bo);
			if ( bo > 200 ) { $("#hid").css("display", "block"); } else { $("#hid").css("display", "none"); };
        })
    })

рони 12.01.2014 17:11
0leg9,
запускайте анимацию 2 раза а не 500

0leg9 12.01.2014 17:18
Цитата:
Сообщение от рони (Сообщение 291752)
0leg9,
запускайте анимацию 2 раза а не 500
Я был уверен, что это значение в миллисекундах.

рони 12.01.2014 17:25
0leg9,
Цитата:
Сообщение от 0leg9
Я был уверен, что это значение в миллисекундах.
я про animate а не про миллисекунды вам написал

рони 12.01.2014 17:47
0leg9,
<!DOCTYPE HTML>

<html>

<head>
  <title>Untitled</title>
  <meta charset="utf-8">
  <style type="text/css">
  #hid{
    width: 50px;
    height: 50px;
    background: #FF0000;
    opacity: 0;
    position: fixed;
  }
  body{
     height: 1500px;
  }

  </style>
  <script src="http://code.jquery.com/jquery-1.9.1.js"></script>
  <script>
 $(document).ready(function(){
        $(window).scroll(function(){
            var bo = $(this).scrollTop();
             var a = $("#hid").css('opacity')
             $("#hid").html(bo);
if ( bo >= 200 && a == 0) {$("#hid").stop().animate({'opacity':'1'},500)};
        if ( bo < 200 && a == 1) {$("#hid").stop().animate({'opacity':'0'},500)};
        })
    })

  </script>
</head>

<body>
   <div id="hid">

</div>


</body>

</html>

Vlasenko Fedor 12.01.2014 22:11 
<style type="text/css">
      #hid {
        width: 50px;
        height: 50px;
        background: #FF0000;
        opacity: 0;
        position: fixed;
      }
      body {
        height: 1500px;
      }
    </style>
<body>
    <div id="hid"></div>
  <script src="http://code.jquery.com/jquery-1.9.1.js"></script>
  <script>
    $(function () {
      var element = $("#hid"), display;
      $(window).scroll(function () {
        display = $(this).scrollTop() >= 200;
        display != element.css('opacity') && element.stop().animate({ 'opacity': display }, 500);
      });
    });
  </script>
</body>

рони,
bo ? , a ?

Vlasenko Fedor 13.01.2014 00:04 
<style type="text/css">
body{
    min-height: 1500px;
}
#blfix{
    display:none;
    position:fixed;
    top:0; 
    background-color: red;
    width: 100%;
    padding: 20px;
}
</style>
<div id="content">Пример теста</div>
<div id="blfix">Наш блок</div>
<script src="http://code.jquery.com/jquery-1.9.1.js"></script>
<script>
jQuery(function(f){
    var element = f('#blfix');
    f(window).scroll(function(){
        element['fade'+ (f(this).scrollTop() > 200 ? 'In': 'Out')](500);           
    });
}); 
</script>

fcos 23.02.2014 00:29
Спасибо ОГРОМНОЕ за эту тему! я уже отчаялась найти как такого эффекта добиться :)

VitaliyGR 25.04.2014 14:15
Может кто скажет, как сделать такое же, только без пикселей (а до прокрутки определенной части сайта, допустим: появление между концом записи и началом блока комментариев). Могу дать ссылку, где я такое видел!

pat 05.06.2014 23:09
У меня ещё такой вопрос. Я всё сделал всё работает, но при исчезновении элемента занимаемое им пространство сверху сайта 40px не убирается:( как быть? И есля перезагрузить страницу элемент не исчезает сразу а только если выполнить полный цикл тоесть опустить и поднять страницу тоько тогда он уберётся.

Vlasenko Fedor 05.06.2014 23:17
добавь к стилю display:none;
это так говорит мой волшебный шар, он читает невидимой для нас код :haha:

рони 05.06.2014 23:18
pat,
телепатов ищите? или может код покажите?

pat 06.06.2014 00:43 
<style type= "text/css">
 #menu_div, #navigation, #menu, #nav{
height: 45px; 
}
</style>

<script>

 $(function () {
     var element = $("#menu_div, #navigation, #menu, #nav"), display;
 $(window).scroll(function () {

 display = $(this).scrollTop() >= 200;
     display != element.css('opacity') && element.stop().animate({ 'opacity': display }, 500);

 });

 });

 </script>


Извиняюсь :thanks:

pat 06.06.2014 00:52
Вот

рони 06.06.2014 01:02
pat,
возьмите код из 8 поста

Vlasenko Fedor 06.06.2014 01:08
да увидел. неужели это я писал :haha: 
<head>
  <style>
    #secondary_bar {
      height: 33px;
      width: 100%;
      background: red;
      /*можешь убрать строку, панель будет видна */
      display: none;
    }
    #secondary_bar.bar_fixed {
      position: fixed;
      top: 0;
      z-index: 9999;
      display: block;
    }
    /* Стили теста */
    body {
      height: 1200px;
    }
    #test {
      height: 55px;
      background: green;
    }
  </style>
</head>
<body>
  <div id="test">Test</div>
  <div id="secondary_bar">Здесь меню</div>Здесь разный текст и все остальное
  <br>Здесь разный текст и все остальное
  <br>Здесь разный текст и все остальное
  <br>Здесь разный текст и все остальное
  <br>Здесь разный текст и все остальное
  <br>
  <script src="http://code.jquery.com/jquery-1.9.1.js"></script>
  <script>
    jQuery(function (f) {
      f(window).scroll(function () {
        f('#secondary_bar')[(f(this).scrollTop() > 55 ? "add" : "remove") + "Class"]("bar_fixed");
      });
    });
  </script>
</body>

pat 06.06.2014 01:14
Спасибо большое! Но осталась ещё одна проблемка..

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

Vlasenko Fedor 06.06.2014 01:44
так поставь в head скрипты
это свидетельствует о том, что ты захламил сайт уже всяким мусором :dance:

pat 06.06.2014 01:53
Цитата:
Сообщение от Poznakomlus (Сообщение 315218)
так поставь в head скрипты
это свидетельствует о том, что ты захламил сайт уже всяким мусором :dance:
Ничего подобного :no:

pat 08.06.2014 20:16
UP:help:

andrzejlviv 10.06.2014 16:31
подскажите пож. как добавить в код id после которого елемент обратно исчезнет?

3loY 13.06.2014 17:02
Спасибо за скрипт)
Давно использую как паралакс, пример блок с лайтбоксом и его преимуществами...

alex72bel 20.06.2015 11:01
Звук при появлении блока
 
А можно ли сделать так чтобы при плавном появлении блока было звуковое оповещение? Спасибо.

alex72bel 20.06.2015 15:00
Цитата:
Сообщение от 3loY (Сообщение 316364)
Спасибо за скрипт)
Давно использую как паралакс, пример блок с лайтбоксом и его преимуществами...
Ссылка битая к сожалению

Delari 24.07.2015 11:46
Подскажите как можно доработать данный скрипт в таком плане, при прокрутке вниз страницы меню скрывается, т.е. как обычно без скриптов, однако если начинать поднимать страницу вверх, меню плавно появляется, не зависимо где начался подъем, если развернутся не дойдя до вверха и начинать опять вниз спускаться меню опять скрывается

alex72bel 15.01.2016 15:38
Poznakomlus,Что-то попробовал поставить в песочницу и не работает ... тык

Vlasenko Fedor 15.01.2016 23:17
Цитата:
Сообщение от alex72bel
Что-то попробовал поставить в песочницу и не работает ...
 
<style>
body {
  height: 1850px;
}

body {
  display: block;
  margin: 8px;
}

.block {
  display: block;
  margin: 8px;
  height: 200px;
  width: 250px
}

#hid {
  width: 150px;
  height: 50px;
  background: #FF0000;
  opacity: 0;
  position: fixed;
}
</style>
<div class="block">
    <div id="hid">
      тут что-то вставляете
    </div>
 </div>
  <script src="http://code.jquery.com/jquery-1.9.1.js"></script>
  <script>
jQuery( document ).ready(function( $ ) {
   var element = $("#hid"), display;
   $(window).scroll(function() {
     display = $(this).scrollTop() >= 200;
     display != element.css('opacity') && element.stop().animate({
       'opacity': display
     }, 500);
   });
 });
  </script>

alex72bel 16.01.2016 09:11
Poznakomlus,Это все конечно зашибиська, но как сделать чтобы при прокрутке страницы вниз, данный блок всплывал именно внизу страницы!?

Например человек спустился вниз а там выплыл блок к примеру с надписью - "Не нашел что искал? Звони +7 ххх ххх хх хх"

alex72bel 16.01.2016 09:55
Хотя нет. Спасибо. Уже разобрался сам на тестовом сайте

alex72bel 16.01.2016 10:10
Poznakomlus,Подскажите пожалуйста как привязать к оному скрипту так, чтобы блок, например #hid снизу, появлялся еще и #hid1 одновременно сверху ... Спасибо

RaLinski 04.01.2017 21:51
Цитата:
Сообщение от Poznakomlus (Сообщение 291802) 
<style type="text/css">
      #hid {
        width: 50px;
        height: 50px;
        background: #FF0000;
        opacity: 0;
        position: fixed;
      }
      body {
        height: 1500px;
      }
    </style>
<body>
    <div id="hid"></div>
  <script src="http://code.jquery.com/jquery-1.9.1.js"></script>
  <script>
    $(function () {
      var element = $("#hid"), display;
      $(window).scroll(function () {
        display = $(this).scrollTop() >= 200;
        display != element.css('opacity') && element.stop().animate({ 'opacity': display }, 500);
      });
    });
  </script>
</body>

рони,
bo ? , a ?
Здрасте.. Аж зарегился на радостях, нашол то что мне нужно.. Ребят я в коде не совсем. А может даже не вообще)) Прошу скажите пожалуйста а как вставить ссылку на изображение которое должно появлятся вместо красного квадратика.. ??? Куда только не пихал никак и все..

рони 04.01.2017 22:21
Цитата:
Сообщение от RaLinski
как вставить ссылку на изображение которое должно появлятся вместо красного квадратика..
https://webref.ru/css/background-image

12345678 02.02.2017 16:33
Вложений: 1
А как сделать скрытие, но плавное и с кнопочкой показать всё. Пример прикрепил, хотя он не очень удачный т.к. горизонтальное скрытие, да и плавность очень короткая и кнопки "показать всё" нет. Я нашёл этот пример на почтовике mail и привёл, дабы показать, какую плавную прозрачность я имею ввиду.

рони 02.02.2017 16:42
12345678,
:-?

12345678 03.02.2017 11:57
Вложений: 1
Вот на этом скриншоте более показательно, что хотелось бы реализовать.

Как видно, последняя строчка полупрозрачная, что очень хорошо демонстрирует что там есть продолжение. Вероятность открытия полного списка статей и перехода за счёт такого подхода увеличивается.

рони 03.02.2017 12:07
12345678,
открывашка 231 со сменой текста на кнопке

HDN 21.09.2017 07:41
Всем здравствуйте!
Подскажите как бороться с такой ерундой: нужно чтобы при скроллинге страницы состоящей из div и 4 section находящихся во втором div верхнее меню из первого div исчезало при прокрутке на 4-ую section. Нашел скрипт, в отдельном тестовом документе работает, но не знаю как в скрипте задать высоту стр. в единицах wh. И еще само меню сразу исчезает при скролле, блок остается и исчезает в нужном месте, но меню (его текст) заменяется бегающими при скроллинге цифрами.

Что это за цифры и как их убрать?


Вот код:

<!DOCTYPE html PUBLIC "-//W3C//DTD XHTML 1.0 Transitional//EN" "http://www.w3.org/TR/xhtml1/DTD/xhtml1-transitional.dtd">
<html xmlns="http://www.w3.org/1999/xhtml">
<head>
<meta http-equiv="Content-Type" content="text/html; charset=utf-8" />
<title>Документ без названия</title>


<link href="style.css" rel="stylesheet" type="text/css" />


<script type="text/javascript" src="https://ajax.googleapis.com/ajax/libs/jquery/1.7.2/jquery.min.js"></script>
<script>
$(document).ready(function(){
$(window).scroll(function(){
var bo = $(this).scrollTop();
var a = $("#menugl").css('opacity')
$("#menugl").html(bo);
if ( bo >= 1700 && a == 1) {$("#menugl").css("opacity", "0",500)};
if ( bo <= 1700 && a == 0) {$("#menugl").css("opacity", "1",500)};
})
})

</script>



</head>

<body>




<div class="glav">





<section id="c">

<ul id="menugl">

<li class=""> <a href="">11111</a> </li>
<li class=""> <a href="">22222</a> </li>
<li class=""> <a href="">33333</a> </li>

</ul>

</div>



<section class="odin">
</div>



<section class="dva">
</div>





</div>








</body>
</html>


стили


html, body, section, div, span, applet, object, iframe, h1, h2, h3, h4, h5, h6, p, blockquote, pre, a, abbr, acronym, address, big, cite, code, del, dfn, em, font, img, ins, kbd, q, s, samp, small, strike, strong, sub, sup, tt, var, b, u, i, center, dl, dt, dd, ol, fieldset, form, label, legend, table, caption, tbody, tfoot, thead, tr, th, td {margin:0;padding:0; border:0;outline:0; font-size:100%;vertical-align:baseline; background:transparent; }a{text-decoration:none;} .div{word-break:break-all;}#div{word-break:break-all;}
ul, li {list-style-type: none; margin:0;padding:0; border:0;outline:0;}


body
{
height:3000px;
}

.glav
{
height:300vh;
}

#menu
{
width:100vw;
height:100vh;
background:#3FF;
}

#menugl
{
position:fixed;
width:20vw;
height:20vh;
padding:5vh;
background:#66C;
opacity:1;
}

#menugl a:hover
{
color:#0C3;
}


.odin
{
width:100vw;
height:100vh;

}


.dva
{
width:100vw;
height:100vh;
background:#CF6;

}


Часовой пояс GMT +3, время: 23:12.