javascript - JS 通过滚动位置移动一个 Div

Question

当导航栏在页面上的位置达到 400 像素时，我想将 Bootstrap “导航栏”标题移出页面。

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

我已经尝试用 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 的 position 设置为 relative。

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