Question

我正在网站上工作：http://indraply.in scrollspy在桌面上工作正常但是当我在像移动设备这样的小设备上运行网站时，它并没有运行。
HTML CODE

<body data-spy="scroll" data-target=".navbar" data-offset="50">
   <div class="loading"><p>WELCOME TO THE WORLD OF PLYWOOD</p></div>
   <a id="home"></a>
   <nav class="navbar navbar-default navbar-fixed-top">
     <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="#myNavbar">
            <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="myNavbar">
          <ul class="nav navbar-nav navbar-right">
            <li class="active">
               <a href="#home" data-toggle="collapse" data-target="#myNavbar">HOME<span class="sr-only">(current)</span></a></li>
            <li><a href="#about">ABOUT US</a></li> 
            <li><a href="#products">OUR PRODUCTS</a></li>
            <li><a href="#contact">CONTACT</a></li>
            <li><a href="#brands">OUR BRANDS</a></li>
            <li><a href="#gallery">GALLERY</a></li> 
           </ul>
   </div><!-- /.navbar-collapse -->
  </div><!-- /.container-fluid -->
 </nav>

SCROLLSPY JAVASCRIPT CODE

<script>
$(document).ready(function(){
    // Add scrollspy to <body>
    $('body').scrollspy({target: ".navbar", offset: 50});
    // Add smooth scrolling on all links inside the navbar
    $("#myNavbar a").on('click', function(event) {
        // Make sure this.hash has a value before overriding default behavior
        if (this.hash !== "") {
            // Prevent default anchor click behavior
            event.preventDefault();

            // Store hash
            var hash = this.hash;

            // Using jQuery's animate() method to add smooth page scroll
            // The optional number (800) specifies the number of milliseconds it takes to scroll to the specified area
            $('html, body').animate({
                scrollTop: $(hash).offset().top
            }, 1000, function(){

                // Add hash (#) to URL when done scrolling (default click behavior)
                window.location.hash = hash;
            });
        }  // End if

    });
});
</script>

任何解决方案？

Bootstrap scrollspy无法在移动设备上运行

0 个答案: