Отображение и скрытие DIV на свитке

Im нужна помощь с разработкой некоторые JQuery код ...Отображение и скрытие DIV на свитке

Я хочу, чтобы иметь фиксированную боковую панель и в этой панели я хочу иметь Div элемент, который показывает и скрывает в зависимости от того, где пользователь прокручивает.

Пример: Таким образом, пользователь находится в верхней части страницы, а на левой панели будет указано «ввод». Затем, когда они прокручивают вниз, говорят, что 1000px «intro» исчезает, и «Раздел 1» затухает. Затем, когда они прокручиваются вниз, еще 1000px «Раздел 1» исчезает, и «Раздел 2» исчезает. Тогда обратное произойдет при прокрутке назад страница.

Я только изучаю jQuery, поэтому я не слишком хорошо разбираюсь в правильном коде/языке. Ive в настоящее время получил «интро» гаснуть и первый раздел замирания в России, но я не могу работать, как сделать остальное ...

Im предполагая, мне нужно что-то вроде> 1000 & & < 2000 для говоря это когда показать и скрыть, но я не уверен, как правильно его написать.

$(window).scroll(function() { 
 

 
    if ($(window).scrollTop() < 950) { 
 
    $('#intro').fadeIn("slow"); 
 
    } else { 
 
    $('#intro').hide(); 
 
    } 
 

 
    if ($(window).scrollTop() > 1000) { 
 
    $('#one').fadeIn("slow"); 
 
    } else { 
 
    $('#one').hide(); 
 
    } 
 
});

body { 
 
    margin: 0; 
 
    padding: 0; 
 
} 
 

 
.block { 
 
    width: 100%; 
 
    height: 1000px; 
 
    background-color: #D1A2A3; 
 
} 
 

 
.block2 { 
 
    width: 100%; 
 
    height: 1000px; 
 
    background-color: #866061; 
 
} 
 

 
.sideBar { 
 
    width: 300px; 
 
    height: 100vh; 
 
    padding: 30px; 
 
    background-color: #efefef; 
 
    position: fixed; 
 
    left: 0; 
 
    right: 0; 
 
} 
 

 
p { 
 
    font-size: 3em; 
 
    color: #5D5D5D; 
 
} 
 

 
#one { 
 
    display: none; 
 
}

<script src="https://ajax.googleapis.com/ajax/libs/jquery/2.1.1/jquery.min.js"></script> 
 

 
<div class="sideBar"> 
 

 
    <div id="intro"> 
 
    <p>INTRO</p> 
 
    </div> 
 

 
    <div id="one"> 
 
    <p>ONE</p> 
 
    </div> 
 

 
</div> 
 

 
<div class="block"></div> 
 
<div class="block2"></div> 
 
<div class="block"></div> 
 
<div class="block2"></div> 
 
<div class="block"></div> 
 
<div class="block2"></div> 
 
<div class="block"></div> 
 
<div class="block2"></div> 
 
<div class="block"></div> 
 
<div class="block2"></div> 
 
<div class="block"></div> 
 
<div class="block2"></div> 
 
<div class="block"></div> 
 
<div class="block2"></div>

источник

2016-08-30 DaveP19

Вот и пример :)

<html><head> 
<style> 
div.block.active { opacity: 1 } 
.block {opacity:0; background:black; width:150px; height:150px} 
</style> 
<script src=jquery.js></script> 
</head><body style="height:2500px"> 
<div id=block1 class=block></div> 
<div id=block2 class=block></div> 
<!-- <div id=blockN class=block></div> --> 

<script> 
var blocks = { 
    // your blocks 
    1: { 
    min: 100, // first block min height 
    max: 200 // first block max height 
    }, 
    2: { 
    min: 200, // second block min height 
    max: 300 // second block max height 
    } 
    // And so on 
    /* 
    N: { 
    min: height, 
    max: height 
    } 
    */ 

} 
var blocks_c = 0; 
var j; 
for (j in blocks) { 
    if (blocks.hasOwnProperty(j)) { 
    blocks_c++; 
    } 
} 
$(window).scroll(function() { 
    for (var i = 1; i <= blocks_c; i++) { 
    var t = $(window).scrollTop(); 
    if (t > blocks[i].min && t < blocks[i].max) { 
     $('div.block').removeClass('active'); 
     $('div#block' + i).addClass('active'); 
    } 
    } 
}); 

</script> 
</body></html>

источник

2016-08-30 03:17:35 MoolsBytheway

Отображение и скрытие DIV на свитке

ответ

Смежные вопросы