固定导航栏随页面滚动而贴边固定的问题

qq_36815975 2017-01-19 04:01:58

给一个横式的导航栏设置一个class=topbar ，当随页面滚动时，这个导航栏自然随页面滚动而到Page的顶部，这时自动增加一个
class=topbar_fixed，使之贴边固定下来，当页面滚动条滚回到之前的位置时，导航栏又自动去除topbar_fixed的样式。

想问用Javascript或JQuery怎么实现？

...全文

865 3 打赏收藏转发到动态举报

写回复

用AI写文章

3 条回复

切换为时间正序

请发表友善的回复…

发表回复

hiose89 2017-03-06

打赏
举报

[quote=引用 2 楼 qq_36815975 的回复:] 网上找出了这样一段代码，希望能修改成随着滚动条滚动，在head滚动到窗口顶部之后才贴边，而不是随着滚动条就立刻贴边：你要随着滚动条滚动还不就意思也是固定，只不过没有固定在顶部而已。这些小东西我感觉无所谓吧，前台是会搞死人的，前台学问太大。没那么必要花太多时间搞能看的过去就行了，太炫没有必要，因为用户体会不到你在后面负付了多少。有没有华丽的效果对于用户来说都没差吧

qq_36815975 2017-03-06

打赏
举报

网上找出了这样一段代码，希望能修改成随着滚动条滚动，在head滚动到窗口顶部之后才贴边，而不是随着滚动条就立刻贴边：


<html>
        <head>
                <title>导航栏跟随</title>
                <meta charest="utf-8">
                <style>
                        *{margin: 0;padding: 0;}
                        #content{height: 2000px;}
                        #head{ height: 300px; width: 100px; background: gray; position: absolute;}
                </style>
                <script>
                        window.onload=function(){
                                var oHead=document.getElementById('head');
                                var h=document.body.clientHeight/2 -150;
                                oHead.style.top =h+ 'px';
                                        document.onscroll=function(){
                                        var top=document.body.scrollTop || document.documentElement.scrollTop;
                                        var left=document.body.scrollLeft || document.documentElement.scrollLeft;
                                        oHead.style.top =h+top + 'px';
                                        oHead.style.left =left + 'px';
                                }
                        }
                </script>
        </head>
        <body>
                <div id='content'>
                        <div id='head'>  向所有辛勤的程序员致敬！ </div>
                </div>        
        </body>
</html>