Question

我无法在滚动条上创建固定的导航栏。我已经看了一些在这里发布的答案但是我无法让它为我的解决方案工作。我面临的问题是导航栏不会在标题后滚动。它保持在标题下方的固定位置，尽管向下滚动但不会移动。有什么想法吗？

//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

屏幕截图2

Answer 1

要将导航栏保持在滚动它的同一位置

position: fixed;

在为我工作的导航的CSS中，但那可能不是你想要的......

Answer 2

$(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`

固定导航栏滚动

2 个答案: