时间戳

首页 > 解决方案 > 将导航栏/箭头导航与滚动同步

javascript - 将导航栏/箭头导航与滚动同步

问题描述

我有一个带有部分和引导导航栏的页面网站。我可以通过单击导航栏中的链接、滚动（自动滚动到下一部分）和单击箭头（上/下）来移动到不同的部分。我的问题是：当我单击链接或单击箭头移动到不同的部分，然后滚动时，滚动不会占用新的位置/部分，而是就像我在上一个部分一样。示例：我在第 2 部分，单击链接并移至第 4 部分，然后向上滚动。我没有去第三部分，而是去第一部分。我的js代码是：

/*fullpagescroll*/
$(document).ready(function() {
    var scrollLink = $('.scroll');

/*smoothScrolling */
    scrollLink.click(function(e) {
        e.preventDefault();
        $('body,html').animate({ 
            scrollTop: $(this.hash).offset().top    
        }, 800)
    })

/*active link */
    $(window).scroll(function() {
        var scrollbarLocation = $(this).scrollTop();
        scrollLink.each(function() {
            var sectionOffset = $(this.hash).offset().top - 50
            if (sectionOffset <= scrollbarLocation) {
                $(this).parent().addClass('active')
                $(this).parent().siblings().removeClass('active')
            }
        })
    })      
});


 //Set each section's height equals to the window height
    $('section').height($(window).height());
    /*set the class 'active' to the first element 
     this will serve as our indicator*/
    $('section').first().addClass('active');

    /* handle the mousewheel event together with 
     DOMMouseScroll to work on cross browser */
    $(document).on('mousewheel DOMMouseScroll', function (e) {
        e.preventDefault();//prevent the default mousewheel scrolling
        var active = $('section.active');
        //get the delta to determine the mousewheel scrol UP and DOWN
        var delta = e.originalEvent.detail < 0 || e.originalEvent.wheelDelta    > 0 ? 1 : -1;

        //if the delta value is negative, the user is scrolling down
        if (delta < 0) {
            //mousewheel down handler
            next = active.next();
            //check if the next section exist and animate the anchoring
            if (next.length) {
               /*setTimeout is here to prevent the scrolling animation
                to jump to the topmost or bottom when 
                the user scrolled very fast.*/
                var timer = setTimeout(function () {
                    /* animate the scrollTop by passing 
                    the elements offset top value */
                    $('body, html').animate({
                        scrollTop: next.offset().top
                    }, 'slow');

                    // move the indicator 'active' class
                    next.addClass('active')
                        .siblings().removeClass('active');

                    clearTimeout(timer);
                }, 500);
            }

        } else {
            //mousewheel up handler
            /*similar logic to the mousewheel down handler 
            except that we are animate the anchoring 
            to the previous sibling element*/
            prev = active.prev();

            if (prev.length) {
                var timer = setTimeout(function () {
                    $('body, html').animate({
                        scrollTop: prev.offset().top
                    }, 'slow');

                    prev.addClass('active')
                        .siblings().removeClass('active');

                    clearTimeout(timer);
                }, 500);
            }

        }
    });



$(document).ready(function(){
  $("a").on('click', function(event) {
    if (this.hash !== "") {
      event.preventDefault();
      var hash = this.hash;
      $('html, body').animate({
        scrollTop: $(hash).offset().top
      }, 800, function(){
        window.location.hash = hash;
      });
    } 
  });
});

我的html是：

<!DOCTYPE html>
    <html>
    <head>
        <title>CKB </title>
    <meta charset="utf-8">
    <meta name="viewport" content="width=device-width, initial-scale=1">
    <link rel="stylesheet" type="text/css" href="bootstrap.css">
      <link rel="stylesheet" type="text/css" href="app.css">




  </head>


  <body>





      <!--<section id="move"> -->
      <!-- NAVBAR-->
     <section id="pageA">
        <nav class="navbar navbar-default navbar-fixed-top">
          <div class="container">
            <div class="navbar-header">
              <button type="button" class="navbar-toggle collapsed" data-toggle="collapse" data-target="#navbar" aria-expanded="false" aria-controls="navbar">
                <span class="sr-only"></span>
                <span class="icon-bar"></span>
                <span class="icon-bar"></span>
                <span class="icon-bar"></span>
              </button>
              <a class="navbar-brand ml-auto">Brand</a>
            </div>

            <div id="navbar" class="collapse navbar-collapse">
              <ul class="nav navbar-nav">
                <li class="active"><a class="scroll" href="#pageA">Start</a></li>
                <li ><a class="scroll" href="#pageB">About us</a></li>
                <li ><a class="scroll" href="#pageC">Prices</a></li>
                <li ><a class="scroll" href="#pageD">Knowledge</a></li>
                <li ><a id="right" class="scroll" href="#pageE">Contact</a></li>
                <li ><a id="right" class="scroll" href="#pageF">Localization</a></li>
              </ul>
            </div>
          </div>
         </nav>

    <!---LOGO -->

          <div class= "down">           
              <a  href="#pageB" class="hvr-hang"><img src="down.png"></a>
          </div>     


        <!-- strzałki nawigujące --> 






       </section>

       <section id="pageB">



        <div class= "up1">           
            <a  href="#pageA" class="hvr-bob"><img src="up.png"></a>
        </div>     


        <div class= "down ">           
          <a  href="#pageC"class="hvr-hang"><img src="down.png"></a>
        </div>     



       </section>


       <section id="pageC">


           <div class= "up">           
              <a  href="#pageB" class="hvr-bob"><img src="up.png"></a>
            </div>

            <div class= "down">           
              <a  href="#pageD" class="hvr-hang"><img src="down.png"></a>
            </div>

      </section>

      <section id="pageD">

            <div class= "up">           
              <a  href="#pageC" class="hvr-bob"><img src="up.png"></a>
            </div>

            <div class= "down">           
              <a  href="#pageE" class="hvr-hang"><img src="down.png"></a>
            </div>

       </section>

       <section id="pageE">


            <div class= "up">           
              <a  href="#pageD" class="hvr-bob"><img src="up.png"></a>
            </div> 

            <div class= "down">           
               <a  href="#pageF" class="hvr-hang"><img src="down.png"></a>
            </div>      

       </section>

       <section id="pageF">

            <div class= "up">           
              <a  href="#pageE" class="hvr-bob"><img src="up.png"></a>
            </div>

       </section>




    <script type="text/javascript" src="https://code.jquery.com/jquery-2.1.4.js"></script>
    <script type="text/javascript" src="https://maxcdn.bootstrapcdn.com/bootstrap/3.3.5/js/bootstrap.min.js"></script>
    <script type="text/javascript" src="app.js"></script> 





 </body>
    </html>

我的CSS是：

body {
    overflow:hidden;
}



#content {
    left:50%;
    position: center;
    padding-top: 10%;
    text-align: center;
    text-shadow: 5px 4px 3px rgba(0,0,0,0.4),
    5px 8px 13px rgba(0,0,0,0.1),
    5px 18px 23px rgba(0,0,0,0.1);
    }



#logo {
    width: 350px;
    height: auto; 
    }

 #sentencja {
    padding-top: 1%;
    margin-top: 0;
    text-align: center;
    color: white;
    font-style: italic;
    font-size: 2em;
 }



.navbar-default {
    background-color: black;
    font-size: 1.15em; 
    font-weight: bold;
    opacity: 0.8;
    /*border-bottom: 2px solid grey;
    height: 70px;
    padding-top: 0.7%; */
}

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


@media (min-width: 768px) {
.navbar-nav {
    float:none;
    margin:0 auto;
    display: block;
    text-align: center;
    }
}

@media (min-width: 768px) {
.navbar-nav > li {
    display: inline-block;
    float:none;
}
}

.navbar-default .navbar-nav > li > a:hover,
.navbar-default .navbar-nav > li > a:focus {
    color: white;
}



@media only screen and (max-width: 750px) {
    .navbar-default .navbar-collapse {
        border-color: grey;
        background-color: black;
     } 
 }


.navbar-default .navbar-brand { /* kolor */
    color: #d6d6d6;
}


@media (min-width:768px){
  .navbar > .container .navbar-brand,
  .navbar > .container-fluid .navbar-brand {
    float: left;
    margin-right: -190px;
  }
}





section {
    width: 100%;
    height: 750px;
    float: left;

}

#pageA {
    background: orange;
    height:100%;
    width:100%; 
}

#pageB {
    background: red;
    height:100%;
    width:100%; 
}

#pageC {
    background: yellow;
    height:100%;
    width:100%; 
}

#pageD {
    background: blue;
    height:100%;
    width:100%; 
}

#pageE {
    background: green;
    height:100%;
    width:100%; 
}

#pageF {
    background: white; 
    height:750px;
    width:100%; 
}

h1 {
    text-align: center;
    color: white;
    margin-top: 70px;
}

h3 {
    color: white;
}

.up {
    position:relative;
    padding-top:5.5%;
    left:47.5%;
}

.up1 {
    position:relative;
    padding-top:7%;
    left:47.5%;
}

.down {
    position:relative;
    left:47.5%;
    padding-top: 475px;
}

*/
.down1 {
    padding-top: 60px;
}

如何同步呢？谢谢

标签： javascriptjqueryhtmlcss

解决方案

推荐阅读