上滚动固定导航栏

问题描述 投票:0回答:2

我似乎无法创建滚动一个固定的导航栏。我看了一些张贴在这里的答案,但我不能让它为我解决工作中。我现在面临的问题是,导航栏不会在头后滚动。它停留在标题下方的固定位置,尽管向下滚动不动。有任何想法吗?

//jQuery to collapse the navbar on scroll
$(window).scroll(function() {
    if ($(".navbar").offset().top > 50) {
        $(".navbar").addClass("top-nav-collapse");
    } else {
        $(".navbar").removeClass("top-nav-collapse");
    }
});

//jQuery for page scrolling feature - requires jQuery Easing plugin
$(function() {
    $('a.page-scroll').bind('click', function(event) {
        var $anchor = $(this);
        $('html, body').stop().animate({
            scrollTop: $($anchor.attr('href')).offset().top
        }, 1500, 'easeInOutExpo');
        event.preventDefault();
    });
});
body {
    width: 100%;
    height: 100%;
}

html {
    width: 100%;
    height: 100%;
}


@media(min-width:767px) {
    .navbar {
		position: relative
        padding: 20px 0;
        -webkit-transition: background .5s ease-in-out,padding .5s ease-in-out;
        -moz-transition: background .5s ease-in-out,padding .5s ease-in-out;
        transition: background .5s ease-in-out,padding .5s ease-in-out;
        background-color: azure
			
    }

    .top-nav-collapse {
        padding: 0;
    }
}
<body id="home" data-spy="scroll" data-target=".navbar-default">
    
        <!-- Header -->
        <header id="top" class="header-Home">
            <div class="text-vertical-center">

                <!--<img src="img/logocrop2.svg" class="CenterScreen" style="display:inline"> -->
        <div class="row">
                        <div class="col-sm-4 col-sm-push-4">
                            <h4><a href="#About">About</a></h4>
                            <h4><a href="#Services">Services</a></h4>
                            <h4><a href="#Contact">Contact</a></h4>
                        </div>
                </div>
                            </div>


        </header>

    
        <nav class="navbar navbar-default" role="navigation">
            <div class="container">
                        <div class="navbar-header page-scroll">
                            <button type="button" class="navbar-toggle" data-toggle="collapse" data-target=".navbar-ex1-collapse">
                                <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 page-scroll" href="#home">A&amp;Co</a>
                        </div>
            <!-- Collect the nav links, forms, and other content for toggling -->
                        <div class="collapse navbar-collapse navbar-right navbar-ex1-collapse">
                                            <ul class="nav navbar-nav">
                                <!-- Hidden li included to remove active class from about link when scrolled up past about section -->
                                <li class="hidden">
                                    <a class="page-scroll" href="#home"></a>
                                </li>
                                <li>
                                    <a class="page-scroll" href="#about">About</a>
                                </li>
                                <li>
                                    <a class="page-scroll" href="#services">Services</a>
                                </li>
                                <li>
                                    <a class="page-scroll" href="#contact">Contact</a>
                                </li>
                            </ul>
                        </div>
                        <!-- /.navbar-collapse -->
                    </div>
                    <!-- /.container -->
        </nav>
                
   <!-- Intro Section -->
    <section id="intro" class="intro-section">
        <div class="container">
            <div class="row">
                <div class="col-lg-12">
                    <h1>Scrolling Nav</h1>
                    <p><strong>Usage Instructions:</strong> Make sure to include the <code>scrolling-nav.js</code>, <code>jquery.easing.min.js</code>, and <code>scrolling-nav.css</code> files. To make a link smooth scroll to another section on the page, give the link the <code>.page-scroll</code> class and set the link target to a corresponding ID on the page.</p>
                    <a class="btn btn-default page-scroll" href="#contact">Click Me to Scroll Down!</a>
                </div>
            </div>
        </div>
    </section>

    <!-- About Section -->
    <section id="about" class="about-section">
        <div class="container">
            <div class="row">
                <div class="col-lg-12">
                    <h1>About Section</h1>
                </div>
            </div>
        </div>
    </section>

    <!-- Services Section -->
    <section id="services" class="services-section">
        <div class="container">
            <div class="row">
                <div class="col-lg-12">
                    <h1>Services Section</h1>
                </div>
            </div>
        </div>
    </section>

    <!-- Contact Section -->
    <section id="contact" class="contact-section">
        <div class="container">
            <div class="row">
                <div class="col-lg-12">
                    <h1>Contact Section</h1>
                </div>
            </div>
        </div>
    </section>

    <!-- jQuery -->
    <script src="js/jquery.js"></script>

    <!-- Bootstrap Core JavaScript -->
    <script src="js/bootstrap.min.js"></script>

    <!-- Scrolling Nav JavaScript -->
    <script src="js/jquery.easing.min.js"></script>
    <script src="js/scrolling-nav.js"></script>
    <script src="http://code.jquery.com/jquery-latest.min.js" type="text/javascript"></script>

</body>

</html>

截图1个Screenshot 1


截图2 Screenshot 2

javascript jquery html css html5
2个回答
1
投票

为了保持导航条在同一个地方,你滚动它

position: fixed;

在CSS对于为我工作,但不是可能是你所追求的导航...


0
投票
$(window).scroll(function(){
        if($("body").scrollTop() > 100 || $("html").scrollTop() > 100) {
        $(".navbar").addClass(".stop");
        } else {
            $(".navbar").removeClass(".stop");
        }
    });
    enter code here

// css
.stop{
    top: 0;
    left: 0;
    width: 100%;
    padding: 0;

}


// html markup 
    <!-- Begin Navbar -->
        <div class="navbar navbar-default ">
            <div class="container">
                <div class="navbar-header">
                    <div class="logo">
                        <a class="navbar-brand" href="index.html">
                            <img src="images/Restaurant-logo.png" class="img-responsive" alt="Restaurant logo">
                        </a>
                    </div>

                    <button type="button" class="navbar-toggle" data-toggle="collapse" data-target=".navbar-collapse">
                      <span class="icon-bar"><span class="inner"></span></span>
                      <span class="icon-bar"><span class="inner"></span></span>
                      <span class="icon-bar"><span class="inner"></span></span>
                    </button>

                </div>

                <div class="collapse navbar-collapse">

                    <ul class="nav navbar-nav navbar-left ">
                        <li><a href="index.html" class="active">Home</a></li>
                        <li><a href="menu.html">Menu</a></li>
                        <li><a href="about.html">About</a></li>
                        <li class="dropdown">
                            <button class="btn-default dropdown-toggle" type="button" data-toggle="dropdown" data-hover="dropdown" aria-expanded="false">
                              Reservation
                            </button>
                            <ul class="dropdown-menu dropdownhover-bottom" role="menu" aria-labelledby="dropdownMenu1">
                                <li><a href="reservationTable.html">Reservation Table</a></li>
                                <li><a href="reservationEvent.html">Reservation Event</a></li>
                            </ul>
                        </li>  
                    </ul>
                    <div class="logo">
                        <a href="index.html">
                            <img src="images/Restaurant-logo.png" class="img-responsive" alt="Restaurant logo">
                        </a>
                    </div>
                    <ul class="nav navbar-nav navbar-right ">
                        <li><a href="blog.html">Blog</a></li>
                        <li><a href="contact.html">Contact</a></li>
                        <li><a href="tel:(123)234-8765">Order No : (123) 234-8765</a></li>     
                    </ul>

                </div><!-- /collapse -->
            </div><!-- /container -->
        </div><!--/Navbar -->`enter code here`
© www.soinside.com 2019 - 2024. All rights reserved.