个人中心
gpt4 book ai didi

jquery - 导航栏在到达页面顶部后保持在顶部

转载 作者：太空宇宙 更新时间：2023-11-04 12:20:14 24 4
gpt4 key购买 nike

我正在尝试模拟这个 http://jsfiddle.net/adamb/F4BmP/在“结果”部分中，您会看到导航栏在滚动时到达页面顶部后如何保持在页面顶部。我使用了相同的代码，但我的导航栏没有保持在顶部；它继续滚动。我不知道我在这里做错了什么。

这是我的代码:

html

<link href='http://fonts.googleapis.com/css?family=Lato' rel='stylesheet' type='text/css'>
    <head>
        <link rel="shortcut icon" href=".\favicon.ico">
        <title>rentPRO</title>
        <script src="http://ajax.googleapis.com/ajax/libs/jquery/1.11.2/jquery.min.js"></script>
        <script>
            var num = 210;

            $(window).bind('scroll', function () {
                if ($(window).scrollTop() > num) {
                        $('#top_menu').addClass('fixed');
                } else {
                        $('#top_menu').removeClass('fixed');
                }   
            });
        </script>   
    </head>

CSS

#header {
    background-image: url("https://lh6.googleusercontent.com/-4epq8pWSUKQ/VNX4lGi_GrI/AAAAAAAAAIo/9gDg5CubDO8/w1044-h201-no/header%2Bfinal1.jpg");
        background-size: 100% 100%;
    width: 1075px;
        height: 200px;
    margin: 0 auto;
    position: relative;
    }

#top_menu {
    display:block;
    position: absolute;
    top: 210px;
    left: 136px;
    border-radius: 4px;
    border-width: 1px 1px 1px;
    border-style:solid;
    background-color: white;
    font-family: 'Lato', sans-serif;
    font-size: 14.85px;
    height: 40px;
    width: 1075px;
    margin: 0 auto;
    border-color: #A4A4A4;
    }
.fixed {
    position: fixed;
    top: 0;
    }

最佳答案

将“top_menu”更改为类而不是 ID 对我有用。工作 jsfiddle .

HTML:div class="top_menu"
CSS:.top_menu

JQuery:

$(document).ready(function(){
    $(window).bind('scroll', function () {
         if ($(window).scrollTop() > num) {
              $('.top_menu').addClass('fixed');
         } else {
              $('.top_menu').removeClass('fixed');
         }   
    });
});

关于jquery - 导航栏在到达页面顶部后保持在顶部，我们在Stack Overflow上找到一个类似的问题： https://stackoverflow.com/questions/28416415/

24 4 0
文章推荐： c++ - 将缓冲的文本数据读入字符串
文章推荐： java - 使用 pojo 数组将 Json 数组转换为 Pojo 时出现问题
文章推荐： c++ - 使用 setjmp longjmp 时出现段错误
文章推荐： Javac “cannot find symbol” 为什么？
太空宇宙
个人简介

我是一名优秀的程序员,十分优秀！

滴滴打车优惠券免费领取
滴滴打车优惠券
Copyright 2021 - 2024 cfsdn All Rights Reserved 蜀ICP备2022000587号
广告合作:1813099741@qq.com 6ren.com