JS通过滚动位置移动Div

当导航栏在页面上的位置达到400px时，我想将引导“navbar”标题从页面移开。JS通过滚动位置移动Div

如果您看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插件。感谢您的任何想法！

来源

2014-01-23 Nick B

我不是很熟悉的scrollorama插件但你可以得到这个简单的使用jQuery通过scroll()事件进行：

$(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/

来源

2014-01-23 09:09:21

在小提琴伟大的作品，但是当我把它放在我的网站不会出于某种原因。你有什么机会快速查看为什么它不适合我？ [网站]（http://www.californiafootgolfclub.com/dev/） –

是的，在网站上，您希望导航栏何时离开顶部？当滚动条到达滑块的底部时？ –

其实抱歉犯了一个愚蠢的错误：它在jsfiddle中工作。但是，有一个问题是，我怎样才能让导航栏消失在红色div结束的地方？那么导航栏就不会存在于蓝色的div上了吗？目前navbar延伸到蓝色div直到红色div消失.. –

听滚动事件使用jQuery找到，如果导航栏用红色或蓝色的div

重叠指定一个类来红格

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

后来听滚动事件，并使用getBoundingClientRect（）来查找导航栏的共同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/

来源

2014-01-23 08:54:53 krishnan

JS通过滚动位置移动Div

回答

相关问题