Question

当导航栏在页面上的位置达到400px时，我想从页面上移开一个自举“navbar”标题。

如果你看this jsfiddle，我希望.navbar在蓝色块开始时（400px）离开页面顶部。导航栏将通过红色div保留在页面上，然后在蓝色块开始时离开页面顶部。

我试图用scrollorama (jquery plugin)做到这一点，但还没有成功：

$(document).ready(function() {
    var scrollorama = $.scrollorama({ blocks:'.scrollblock' });
    scrollorama.animate('#fly-in',{ delay: 400, duration: 300, property:'top', start:-1400, end:0 });
});

我正在寻找一个纯粹的JavaScript解决方案，或者使用scrollorama插件。谢谢你的任何想法！

Answer 1

我对 scrollorama插件不是很熟悉，但你可以通过scroll()事件简单地使用jQuery完成这项工作：

$(window).scroll(function () {
    var winTop = $(this).scrollTop();
    var redHeight = $('#red').height();
    if (winTop >= redHeight) {
    /*if the scroll reaches the bottom of the red <div> make set '#move' element
      position to absolute so it will move up with the red <div> */ 

        $('#move').css({
            'position': 'absolute',
            'bottom': '0px',
            'top': 'auto'
        });
    } else {
      //else revert '#move' position back to fixed

        $('#move').css({
            'position': 'fixed',
            'bottom': 'auto',
            'top': '0px'
        });
    }
});

请参阅此更新的jsfiddle：jsfiddle.net/52VtD/1945/

编辑：使其成为导航条在红色div结束的同一点消失

我之前也注意到了，但是我无法找到问题所以我删除了导入的样式表并为导航栏创建了基本样式。要使导航栏在红色div结束的同一点消失，您需要将导航栏的高度减去条件：

if (winTop >= redHeight - $('#move').height()) {

我还重新构建了标记以使其正常工作。我已将红色div中的导航栏嵌套，并将红色div的位置设置为relative。

请参阅此jsfiddle：jsfiddle.net/52VtD/1981/

Answer 2

使用jquery监听滚动事件，以查找导航栏是否与红色或蓝色div重叠

将一个类分配给红色分区

   <div class="redDiv" style="height:400px; background-color: red;">

然后听滚动事件并使用getBoundingClientRect（）来查找导航栏的co-ord和视口中的div以检查重叠

   $(document).scroll(function(event)
                 {
                     var rect1 = $('.navbar').get(0).getBoundingClientRect();
                     var rect2 = $('.redDiv').get(0).getBoundingClientRect();
                     var overlap = !(rect1.right < rect2.left || 
            rect1.left > rect2.right || 
            rect1.bottom < rect2.top || 
            rect1.top > rect2.bottom)

                   if(!overlap)
                   {
                       if ( $(".navbar").is(":visible") ) {
                           $('.navbar').hide();
                       }
                   }
                   else
                   {
                        if ( !$(".navbar").is(":visible") ) {
                           $('.navbar').show();
                       }
                   }
                 });

这是一个工作小提琴 http://jsfiddle.net/SXzf7/

JS按滚动位置移动Div

2 个答案: