javascript 滚动条下拉导航fixed

﹏ヽ暗。殇╰゛Y 2022-01-09 08:37 183阅读 0赞

<!doctype html>
    
    <html>
    <style>
        body{
            margin:0;
            padding:0;    
        }
        #top{
            background:#000;
            width:400px;
            height:30px;
            
        }
        .a{
            position:fixed;
            top:0;
            left:0;
        }
    
    </style>
        <body>
            <div style="height:300px;width:100%;background:#ccc;">
            </div>
            <div id="top">
            </div>
            <div style="height:1900px;">
            </div>
        
            <script>
            window.onscroll=function(){
            var t = document.documentElement.scrollTop || document.body.scrollTop;  
            var Otop =    document.getElementById('top');
                if(t > 300){
                    var A = Otop.offsetHeight+Otop.offsetTop;
                    Otop.style.position='fixed';
                    Otop.style.left='0';
                    Otop.style.top='0';
                }else{
                    Otop.style.position='';
                }
            }
    
            
            </script>
        
        </body>
    </html>

转载于:https://www.cnblogs.com/xinlinux/p/4116673.html

发表评论取消回复

表情：

评论列表（有 0 条评论，183人围观）

还没有评论，来说两句吧...

相关阅读

相关 div设置下拉滚动条以及翻滚到底部

div设置下拉滚动条首先：我们创建一个父亲div进行包裹我们的内容，style中起作用的是height以及overflow属性，这两个必须要有 <div cla

太过爱你忘了你带给我的痛/ 2023年05月21日 15:19/ 0 赞/ 300 阅读

相关 DEDECMS v5.7 实现导航条下拉二级菜单

1、将下面这段代码贴到templets\\default\\footer.htm文件里（只要在此文件里就行，位置无所谓啦！自己看着办！） <!-- //二级子类下

曾经终败给现在/ 2022年12月11日 13:57/ 0 赞/ 177 阅读

相关 Vue 清除elementUI下拉组件滚动条样式

[element清除el-scrollbar组件的滚动条, 和清除滚动条引发的问题][element_el-scrollbar_ _ _] ![2021020417060

Dear 丶/ 2022年10月27日 13:56/ 0 赞/ 67 阅读

相关 DedeCMS导航下拉菜单

DedeCMS 导航下拉菜单是一个非常经典的js下拉菜单，有两个效果值得借用：淡入淡出效果。DedeCMS导航下拉菜单有轻微的淡入淡出效果，这是通过setTimeout()方

阳光穿透心脏的1/2处/ 2022年09月29日 05:29/ 0 赞/ 227 阅读

相关 selenium+webdriver+python 滚动条（scrollTop）下拉

语言：python 在获取元素的时候，明明元素确切的存在但是无法定位到，原因比较常见的有两个 1.等待时间不够，time.sleep()下看看 2.元素在页面下方，

水深无声/ 2022年07月13日 13:27/ 0 赞/ 189 阅读

相关 layui固定下拉框的显示条数（有滚动条）

在css中加入下面代码: <style> .layui-form-select dl { max-height:200px; } </styl

短命女/ 2022年05月23日 09:22/ 0 赞/ 147 阅读

相关下拉列表和滚动条的使用

下拉列表和滚动条的使用每当我准备认真看书的时候，这个世界就变得非常有趣，任何风吹草动都能吸引我下拉列表JComboBox的使用 1、创建一个数组 2

向右看齐/ 2022年05月06日 12:00/ 0 赞/ 169 阅读

相关 javascript 滚动条下拉导航fixed

<!doctype html> <html> <style> body{ margin:0;

﹏ヽ暗。殇╰゛Y/ 2022年01月09日 08:37/ 0 赞/ 184 阅读

相关导航下拉菜单效果

以下是首页包含的TOP.htm文件 <link href="js/menu\_style.css" rel="stylesheet" type="text/css" />

港控/mmm°/ 2021年12月20日 02:11/ 0 赞/ 346 阅读

相关解决Bootstrap导航条不能下拉

前言制作网页的时候发现使用Bootstrap制作的导航条，在页面缩小到一定程度时候变成下拉状态，此时，点击下拉没有用，检查代码没有问题，最后发现的问题是文件引用出现了问

淩亂°似流年/ 2021年06月24日 16:09/ 0 赞/ 481 阅读