相关疑难解决方法(0)

设置窗口滚动动画的CSS值限制

我有一个<div id ='map'>地图,当用户向下滚动时会滑动.但是,它似乎让地图永远滚动,永远不会让用户实际到达页面的底部(有一个页脚).

我想要做的是让<div>在到达另一个动态大小(高度可变)<div>的结尾时停止滚动.这两个<div>是并排的并且在同一行中.

这是我用来使用用户的滚动进行正确div移动的JavaScript代码:

$(function() {

    var $sidebar   = $("#map"),
        $window    = $(window),
        offset     = $sidebar.offset(),
        topPadding = 15;

    $window.scroll(function() {
        if ($window.scrollTop() > offset.top) {
            $sidebar.stop().animate({
                marginTop: $window.scrollTop() - offset.top + topPadding
            });
        }
        else {
            $sidebar.stop().animate({
                marginTop: 0
            });
        }
    });
});
Run Code Online (Sandbox Code Playgroud)

html javascript css jquery sticky

5
推荐指数
1
解决办法
6891
查看次数

如何在页面底部构建简单的粘性导航?

我正在尝试这样做,当你加载页面时div正在坚持它的底部.然后,当用户向下滚动时,它会粘到顶部.

我可以使用粘性元素粘贴到顶部.

<div id="container">
<div id="menu">
    <ul>
        <li><a href='#test'>Line 1</a></li>
        <li><a href='#'>Line 2</a></li>
        <li><a href='#'>Line 3</a></li>
    </ul>
</div>
</div>

<script type="text/javascript">
    $(document).ready(function(){
        $(window).scroll(function(){
           if($(this).scrollTop()>=660)
           {
           $('#menu').addClass('fixed');
           }else{
               $('#menu').removeClass('fixed');
           }
                   });
    });
    </script>
Run Code Online (Sandbox Code Playgroud)

我不能这样做,所以它在负载时坚持到底.如果不清楚,我附上了一个小模型.

黏

html javascript css jquery scroll

3
推荐指数
1
解决办法
6362
查看次数

标签 统计

css ×2

html ×2

javascript ×2

jquery ×2

scroll ×1

sticky ×1