个人中心
gpt4 book ai didi

javascript - Bootstrap scrollspy 没有检测到家

转载 作者：行者123 更新时间：2023-11-27 23:54:35 24 4
gpt4 key购买 nike

我最近使用 scrollspy 插件实现了我的 Bootstrap 导航。我可以注意到 2 个不同的问题:

  • 当我滚动到顶部(在主页部分)时，scrollspy 不会在栏中突出显示“主页”。
  • 当我在不同部分之间单击时，有时菜单会消失不到一秒钟然后重新出现。

我做了一个 fiddle :

http://jsfiddle.net/x8Gt7/4/

HTML:

<body>
    <header></header>
    <div class="container">
        <nav id="side-nav" class="navbar navbar-default navbar-fixed-top" role="navigation">
            <div class="container-fluid">
                <!-- Brand and toggle get grouped for better mobile display -->
                <div class="navbar-header">
                    <button type="button" class="navbar-toggle" data-toggle="collapse" data-target="#bs-example-navbar-collapse-1">
                        <span class="sr-only">Toggle navigation</span>
                        <span class="icon-bar"></span>
                        <span class="icon-bar"></span>
                        <span class="icon-bar"></span>
                    </button>
                    <a class="navbar-brand" href="#">Brand</a>
                </div>

                <!-- Collect the nav links, forms, and other content for toggling -->
                <div class="collapse navbar-collapse" id="bs-example-navbar-collapse-1">
                    <ul class="nav navbar-nav">
                        <li class="active"><a href="#home">HOME</a></li>
                        <li><a href="#link1">LINK 1</a></li>
                        <li><a href="#link2">LINK 2</a></li>
                        <li><a href="#link3">LINK 3</a></li>
                    </ul>
                </div><!-- /.navbar-collapse -->
            </div><!-- /.container-fluid -->
        </nav>
        </div>
        <div class="row">
            <div class="resume text-center">Lorem ipsum dolor sit amet, consectetur adipisicing elit, sed do eiusmod tempor incididunt ut labore et dolore magna aliqua. Ut enim ad minim veniam, quis nostrud exercitation ullamco laboris nisi ut aliquip ex ea commodo consequat. Duis aute irure dolor in reprehenderit in voluptate velit esse cillum dolore eu fugiat nulla pariatur. Excepteur sint occaecat cupidatat non proident, sunt in culpa qui officia deserunt mollit anim id est laborum
            </div>
        </div>
        <section id="link1">
            <div class="row title_section text-center" style="background-color:#87c0e4;">LINK 1</div>
            <div class="mini_title text-center">Lorem ipsum dolor sit amet, consectetur adipisicing elit, sed do eiusmod tempor incididunt ut labore et dolore magna aliqua. Ut enim ad minim veniam, quis nostrud exercitation ullamco laboris nisi ut aliquip ex ea commodo consequat. Duis aute irure dolor in reprehenderit in voluptate velit esse cillum dolore eu fugiat nulla pariatur. Excepteur sint occaecat cupidatat non proident, sunt in culpa qui officia deserunt mollit anim id est laborum</div>
        </section>
        <section id="link2">
            <div class="row title_section text-center" style="background-color:#87c0e4;">LINK 2</div>
            <div class="mini_title text-center">Lorem ipsum dolor sit amet, consectetur adipisicing elit, sed do eiusmod tempor incididunt ut labore et dolore magna aliqua. Ut enim ad minim veniam, quis nostrud exercitation ullamco laboris nisi ut aliquip ex ea commodo consequat. Duis aute irure dolor in reprehenderit in voluptate velit esse cillum dolore eu fugiat nulla pariatur. Excepteur sint occaecat cupidatat non proident, sunt in culpa qui officia deserunt mollit anim id est laborum</div>
        </section>
        <section id="link3">
            <div class="row title_section text-center" style="background-color:#87c0e4;">LINK 3</div>
            <div class="mini_title text-center">Lorem ipsum dolor sit amet, consectetur adipisicing elit, sed do eiusmod tempor incididunt ut labore et dolore magna aliqua. Ut enim ad minim veniam, quis nostrud exercitation ullamco laboris nisi ut aliquip ex ea commodo consequat. Duis aute irure dolor in reprehenderit in voluptate velit esse cillum dolore eu fugiat nulla pariatur. Excepteur sint occaecat cupidatat non proident, sunt in culpa qui officia deserunt mollit anim id est laborum</div>
        </section>
    </div>

JavaScript:

jQuery( document ).ready(function( $ ) {

    var myOffset = 50

    $("body").scrollspy({target: "#side-nav", offset:(myOffset+1)});

    $('[data-spy="scroll"]').each(function () {
        var $spy = $(this).scrollspy('refresh')
    })

    $('#link1').appear(function() {
        $(this).animate({'opacity':'1'},500);
    });
    $('#link2').appear(function() {
        $(this).animate({'opacity':'1'},500);
    });
    $('#link3').appear(function() {
        $(this).animate({'opacity':'1'},500);
    });

    $('.navbar-nav li a').click(function(){  
        $('#bs-example-navbar-collapse-1').collapse('hide');
    });

    //SCROLL MENU
    function scrollNav() {
        $('.nav a').click(function(){  
        //Toggle Class
        $(".active").removeClass("active");   
        $(this).closest('li').addClass("active");

        if ($(this).attr('href') == "#home") {
            $('html, body').stop().animate({scrollTop: 0}, 400);
        } else {
            $('html, body').stop().animate({scrollTop: $( $(this).attr('href') ).offset().top - myOffset}, 400);
        }
        return false;
    });
        $('.scrollTop a').scrollTop();
    }
    scrollNav();
    //END

});

CSS:

body {
  padding-top: 150px;
  margin: 0 50px;
}

#link1, #link2, #link3, #link4 {
    opacity: 0
}

.title_section {
  margin-top:150px;
  margin-bottom:100px;
  color:white;
  padding: 10px;
  font-size: 30px;
  font-weight:400;
}


.mini_title {
    font-size: 18px;
    margin-bottom: 20px;
}

.navbar .navbar-nav {
  display: inline-block;
  float: none;
  vertical-align: bottom;
}

.navbar .navbar-collapse {
  text-align: center;
}

最佳答案

您没有在代码中的任何地方指定您的 id="home"。我觉得你应该这样写

<div class="row" id="home">
        <div class="resume text-center">Lorem ipsum dolor sit amet, consectetur adipisicing elit, sed do eiusmod tempor incididunt ut labore et dolore magna aliqua. Ut enim ad minim veniam, quis nostrud exercitation ullamco laboris nisi ut aliquip ex ea commodo consequat. Duis aute irure dolor in reprehenderit in voluptate velit esse cillum dolore eu fugiat nulla pariatur. Excepteur sint occaecat cupidatat non proident, sunt in culpa qui officia deserunt mollit anim id est laborum
        </div>
    </div>

希望这对您有所帮助。

关于javascript - Bootstrap scrollspy 没有检测到家，我们在Stack Overflow上找到一个类似的问题： https://stackoverflow.com/questions/24803753/

24 4 0
文章推荐： javascript - Lightgallery 哈希插件中有多个画廊？
文章推荐： c++ - 这是针对大学 100 级软件类(class)期中考试的合理笔试吗？
文章推荐： javascript - 调用 p :remoteCommand via a JavaScript function passing a message local to that function to another function through the "oncomplete" handler
文章推荐： c++ - 结构引用编译错误 : expected identifier or ‘(’ before ‘&’ token
行者123
个人简介

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

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