javascript 滚动条下拉导航fixed

﹏ヽ暗。殇╰゛Y 2022-01-09 08:37 258阅读 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 条评论，258人围观）

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

相关阅读

相关 Android Material Design：基于CoordinatorLayout实现向上滚动导航条ToolBar滚出、向下滚动导航条滚出

Android Material Design：基于CoordinatorLayout实现向上滚动导航条ToolBar滚出、向下滚动导航条滚出要实现的效果：

我会带着你远行/ 2023年10月16日 22:20/ 0 赞/ 30 阅读

相关 CSS实现移动端横向滚动导航条，仿今日头条滚动导航

应用场景现在很多移动端的横向导航都是实现了滚动效果，我们先来看几个案例：今日头条 ![aHR0cHM6Ly9pbWcyMDIwLmNuYmxvZ3MuY29t

爱被打了一巴掌/ 2023年07月25日 08:44/ 0 赞/ 26 阅读

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

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

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

相关移动端左右滚动（无滚动条）导航栏

方法一：flex和overflow-y 下面这两条css属性，能够帮助我们实现移动端导航栏，左右滚动，但有滚动条。 display: flex; ov

秒速五厘米/ 2023年03月04日 09:14/ 0 赞/ 30 阅读

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

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

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

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

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

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

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

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

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

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

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

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

相关 javascript 滚动条下拉导航fixed

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

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

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

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

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