Можно ли скрыть один div и показать другой div после прокрутки 50% или более?

Question

У меня есть одна секция внутри 2 DIV, где имя div 1-го и 2-го div. По умолчанию 2-й div будет скрыт, после прокрутки 50% или более 1-й div будет скрыт, а второй div будет отображаться. Как мне это сделать?

я использовал:

var heightDivid = $(window).height()/2; 
$(window).on('scroll', function(e){ 
    $('.sections-class').each(function(){ 
     if(this.getBoundingClientRect().top <= heightDivid){ 
      $(this).removeClass('heightDivids') ; 
     } 
     else{ 
      $(this).addClass('heightDivids') ; 
     } 
    }) 
}) 

Answer 1

Может быть, вы можете изменить что-то вдоль этих линий, чтобы сделать то, что вы пытаетесь сделать.

Используйте jQuery's scrollTop, чтобы определить, где вы хотите, чтобы изменения произошли.

Установите предел, если вы хотите скрыть раздел one и показать two div.

$(window).scroll(function() { 
    var height = $(window).scrollTop(); 
    if(height > 10) { 
     $('.two').show(); 
     $('.one').hide(); 
    } 
}); 

Пример: http://jsfiddle.net/xv2m4qn6/

Если вы хотите, чтобы эффект обратный просто добавить второй условный:

Пример: http://jsfiddle.net/xv2m4qn6/1/

Answer 2

В прошлом я сделал :) и это работа для меня. ... Спасибо вам за помощь :)

var shadowEdgePoint = $(window).height()/2; 
    $(window).on('scroll', function(e){ 
     $('.section-class').each(function(){ 
      if(this.getBoundingClientRect().top <= shadowEdgePoint){ 
         $('.two').show(); 
         $('.one').hide(); 
      } 
       else{ 
         $('.two').hide(); 
         $('.one').show(); 
        } 
     }) 
    });