【问题标题】:how to create the scribd navbar stick effect如何创建 scribd 导航栏棒效果
【发布时间】:2011-12-13 09:45:34
【问题描述】:

使用jquery.waypoints 插件,您可以轻松创建粘性元素。它的sticky elements demo 显示了一个导航栏,默认情况下该导航栏位于页面顶部下方,然后具有以下行为: a) 当用户向下滚动并且导航栏到达视口的顶部时,它会停留在那里 b) 当用户向上滚动到页面顶部时,导航栏返回到其正常位置。

我正在尝试做一些类似但有些相反的事情,这与 scribd 导航栏的效果完全相同。从this scribd page的最底部开始,慢慢向上滚动查看效果。

这是怎么做到的?我假设航点会促进它。谢谢。

【问题讨论】:

    标签: jquery-plugins scroll scribd jquery-waypoints


    【解决方案1】:

    这是我想出的一个解决方案,但仍然对其他实现感兴趣。

    js:

    //#bottomOfEl is the element you want to stick to the bottom of
    $("#bottomOfEl").waypoint(function(ev, dir){ 
        $("#navbar").toggleClass('sticky', dir === "up");
        ev.stopPropagation();
    }, {
        offset: function() {return $.waypoints('viewportHeight') 
                                    - $(this).height() 
                                    - $("#navbar").height();
                } 
    })   
    

    css:

    #navbar {
        height: 40px;
        width: 500px;
        z-index: 10;
    }
    .sticky { 
        position: fixed;
        bottom: 0px;
    }
    

    【讨论】:

      猜你喜欢
      • 2015-08-25
      • 1970-01-01
      • 1970-01-01
      • 2014-11-15
      • 1970-01-01
      • 1970-01-01
      • 2018-04-28
      • 2015-03-06
      相关资源
      最近更新 更多