平滑滾動與引導scrollspy

Question

此問題已發佈之前，但我認爲我是足夠的不同來證明的問題。

首先這裏是我的小提琴（小心其相當大）https://jsfiddle.net/trrj3k68/ 我很抱歉，但有一些CSS與問題無關，請忽略它們。

的主要問題是：我有一個平滑滾動，我不想scrollspy突出每一個菜單按鈕，頁面滾動。因此，我不得不停用它，而滾動效果正在發生的事情，並重新激活它之後

但我創造，我不能確定又一個問題。 要加載該頁面，請點擊「Menu5」以體驗該錯誤。然後你將滾動到5，給它活躍的類，但只有當你回到頁面頂部時，滾動功能纔會起作用。正確的行爲將是：一旦你滾動到Menu5，你滾動去頂部，Scrollspy應該工作。

這裏是我的JS：

/*------------------------------------------------------------------ 
SCROLLING.JS 
-------------------------------------------------------------------*/ 
// Scrolling animation - anchor buttons 
$(document).ready(function() { 
    $(".scrollTo").click(function() { 
     var t = $(this).attr("href"); 
     $('.active').removeClass('active'); 
     $('#site-header').toggleClass('spy-active'); 
     $("html, body").animate({ 
      scrollTop: $(t).offset().top - 50 
     }, { 
      duration: 1e3 

     }); 
     setTimeout(function() { $('#site-header').toggleClass('spy-active'); }, 1e3); 
     $('body').scrollspy({ target: '.spy-active',offset: 75 }); 
     $(this).parent().addClass('active'); 
     return false; 
    }); 

}); 



//navbar 
var distance = $('#site-header').offset().top, 
    $window = $(window); 

$window.scroll(function() { 
    if ($window.scrollTop() >= distance) { 
     $('#site-header').addClass('fixed-nav') 
    } 
    if ($window.scrollTop() <= distance) { 
     $('#site-header').removeClass('fixed-nav') 
    } 
}); 


$('body').scrollspy({ target: '.spy-active',offset: 75 }); 

這裏是我的最終版本，在所有情況下完全工作：

$(document).ready(function() { 
    $(".scrollTo").click(function() { 
     $(this).parent().addClass('scrolling-active'); 
     $('.scrollTo').not($(this)).parent().addClass('nostyle'); 
     var t = $(this).attr("href"); 
     $("html, body").animate({ 
      scrollTop: $(t).offset().top - 50 
     }, { 
      duration: 1e3, 
      easing: "easeInOutQuint" 
     }); 
     setTimeout(function() { 
      $('.scrollTo').parent().removeClass('scrolling-active'); 
      $('.scrollTo').not($(this)).parent().removeClass('nostyle'); 
     }, 1e3); 
     return false; 
    }); 
}); 

//navbar 
var distance = $('#site-header').offset().top, 
    $window = $(window); 

$window.scroll(function() { 
    if ($window.scrollTop() >= distance) { 
     $('#site-header').addClass('fixed-nav') 
    } 
    if ($window.scrollTop() <= distance) { 
     $('#site-header').removeClass('fixed-nav') 
    } 
}); 


$('body').scrollspy({ target: '.spy-active',offset: 75 }); 

Answer 1

您在點擊動作添加toogleClass這關閉scrollspy。 所以你必須通過在CSS中添加類和設置背景來解決問題。 解決方案在小提琴：https://jsfiddle.net/bfc9x2n7/

$('.scrollTo').addClass('background'); 

Answer 2

嘗試在衆目睽睽下面的代碼，

你在哪裏腳麻被添加容器類的navbar

它可以在導航之外。

/*------------------------------------------------------------------ 
 
SCROLLING.JS 
 
-------------------------------------------------------------------*/ 
 
// Scrolling animation - anchor buttons 
 
$(document).ready(function() { 
 
    $(".scrollTo").click(function() { 
 
    var t = $(this).attr("href"); 
 
    $('.active').removeClass('active'); 
 
    $('#site-header').toggleClass('spy-active'); 
 
    $("html, body").animate({ 
 
     scrollTop: $(t).offset().top - 50 
 
    }, { 
 
     duration: 1e3, 
 

 
    }); 
 
    setTimeout(function() { 
 
     $('#site-header').toggleClass('spy-active'); 
 
    }, 1e3); 
 
    $('body').scrollspy({ 
 
     target: '.spy-active', 
 
     offset: 75 
 
    }); 
 
    $(this).parent().addClass('active'); 
 
    return false; 
 
    }); 
 

 
}); 
 

 

 

 
//navbar 
 
var distance = $('#site-header').offset().top, 
 
    $window = $(window); 
 

 
$window.scroll(function() { 
 
    if ($window.scrollTop() >= distance) { 
 
    $('#site-header').addClass('fixed-nav') 
 
    } 
 
    if ($window.scrollTop() <= distance) { 
 
    $('#site-header').removeClass('fixed-nav') 
 
    } 
 
}); 
 

 

 
$('body').scrollspy({ 
 
    target: '.navbar', 
 
    offset: 74 
 
});

#site-header { 
 
    background: #fff; 
 
    border-bottom: 1px solid #c6c6c6; 
 
    border-top: 1px solid #c6c6c6; 
 
    z-index: 1000; 
 
    left: 0; 
 
    right: 0; 
 
    padding: 0; 
 
} 
 
#site-header .navbar { 
 
    border: 0; 
 
} 
 
#site-header .navbar-nav { 
 
    width: 100%; 
 
    text-align: center; 
 
} 
 
#site-header .navbar-nav > li { 
 
    float: none; 
 
    display: inline-block; 
 
    width: 16.66666%; 
 
} 
 
#site-header .navbar-nav li { 
 
    border-left: 1px solid #c6c6c6; 
 
} 
 
#site-header .accessibility { 
 
    position: absolute; 
 
    right: -9999px; 
 
} 
 
#site-header .navbar { 
 
    margin-bottom: 0px; 
 
} 
 
#site-header .navbar-nav { 
 
    height: 74px; 
 
} 
 
#site-header .navbar-nav > li > a { 
 
    position: relative; 
 
    height: 74px; 
 
    line-height: 55px; 
 
    color: #4b4b4c; 
 
    font-family: 'montserratregular', Helvetica, sans-serif; 
 
    font-size: 1em; 
 
    -webkit-transition: background-color 300ms linear; 
 
    transition: background-color 300ms linear; 
 
    padding-top: 15px; 
 
} 
 
#site-header .commu { 
 
    border-right: 1px solid #c6c6c6; 
 
} 
 
#site-header .navbar-nav > li > a:hover, 
 
#site-header .navbar-nav > li > a:focus { 
 
    background-color: white; 
 
    color: #e55240; 
 
    position: relative; 
 
} 
 
#site-header .navbar-toggle { 
 
    margin-top: 15px; 
 
} 
 
#site-header .navbar-collapse { 
 
    background-color: white; 
 
    padding-right: 0; 
 
} 
 
#site-header .navbar-nav > li > a:hover .fa-plus, 
 
#site-header .navbar-nav > li > a:focus .fa-plus { 
 
    color: #e55240; 
 
} 
 
#site-header .before-icon { 
 
    margin-right: 24px; 
 
} 
 
#site-header .navbar-right { 
 
    margin-right: 0px; 
 
} 
 
#site-header .fa-plus { 
 
    color: #e55240; 
 
    -webkit-transform: rotate(-7deg); 
 
    -ms-transform: rotate(-7deg); 
 
    transform: rotate(-7deg); 
 
    font-size: 25px; 
 
    margin-top: 10px; 
 
    position: absolute; 
 
    top: 22px; 
 
    -webkit-transition: 0.5s; 
 
    transition: 0.5s; 
 
} 
 
#site-header.fixed-nav { 
 
    position: fixed; 
 
    top: 0; 
 
} 
 
#site-header.fixed-nav .navbar-nav { 
 
    height: 50px; 
 
    -webkit-transition: 0.6s; 
 
    transition: 0.6s; 
 
} 
 
#site-header.fixed-nav .navbar-nav > li > a { 
 
    height: 50px; 
 
    line-height: 26px; 
 
    -webkit-transition: 0.6s; 
 
    transition: 0.6s; 
 
} 
 
.fixed-nav + div { 
 
    margin-top: 74px; 
 
} 
 
.menu-button:hover:before, 
 
.menu-button:focus:before, 
 
.menu-button:active:before { 
 
    left: 0; 
 
    right: 0; 
 
} 
 
.active a:before { 
 
    left: 0!important; 
 
    right: 0!important; 
 
} 
 
.active a { 
 
    color: #fff !important; 
 
    background: red !important; 
 
} 
 
#site-header.fixed-nav { 
 
    position: fixed; 
 
    top: 0; 
 
} 
 
#site-header.fixed-nav .navbar-nav { 
 
    height: 50px; 
 
    -webkit-transition: 0.6s; 
 
    transition: 0.6s; 
 
} 
 
#site-header.fixed-nav .navbar-nav > li > a { 
 
    height: 50px; 
 
    line-height: 26px; 
 
    -webkit-transition: 0.6s; 
 
    transition: 0.6s; 
 
} 
 
.fixed-nav + div { 
 
    margin-top: 74px; 
 
}

<link href="https://maxcdn.bootstrapcdn.com/bootstrap/3.3.5/css/bootstrap.min.css" rel="stylesheet" /> 
 
<script src="https://ajax.googleapis.com/ajax/libs/jquery/2.1.1/jquery.min.js"></script> 
 
<script src="https://maxcdn.bootstrapcdn.com/bootstrap/3.3.5/js/bootstrap.min.js"></script> 
 

 

 
<header id="site-header" class="field-master"> 
 
    <div class="container"> 
 
    <div class="navbar navbar-default normal"> 
 
     <div class="navbar-header"> 
 
     <a href="#" class="navbar-toggle" data-toggle="collapse" data-target=".navbar-collapse"> 
 
      <span class="icon-bar"></span> 
 
      <span class="icon-bar"></span> 
 
      <span class="icon-bar"></span> 
 
     </a> 
 
     </div> 
 
     <div id="spynav" class="navbar-collapse collapse"> 
 
     <ul class="nav navbar-nav"> 
 
      <li><a href="#Menu1" class="menu-button scrollTo">Menu1</a> 
 
      </li> 
 
      <li><a href="#Menu2" class="menu-button scrollTo">Menu2</a> 
 
      </li> 
 
      <li><a href="#Menu3" class="menu-button scrollTo">Menu3</a> 
 
      </li> 
 
      <li><a href="#Menu4" class="menu-button scrollTo">Menu4</a> 
 
      </li> 
 
      <li><a href="#Menu5" class="menu-button scrollTo">Menu5</a> 
 
      </li> 
 
     </ul> 
 
     </div> 
 
    </div> 
 
    </div> 
 
</header> 
 

 
<div id="Menu1"> 
 
    <h1>HTML Ipsum Presents</h1> 
 

 
    <p><strong>Pellentesque habitant morbi tristique</strong> senectus et netus et malesuada fames ac turpis egestas. Vestibulum tortor quam, feugiat vitae, ultricies eget, tempor sit amet, ante. Donec eu libero sit amet quam egestas semper. <em>Aenean ultricies mi vitae est.</em> Mauris 
 
    placerat eleifend leo. Quisque sit amet est et sapien ullamcorper pharetra. Vestibulum erat wisi, condimentum sed, <code>commodo vitae</code>, ornare sit amet, wisi. Aenean fermentum, elit eget tincidunt condimentum, eros ipsum rutrum orci, sagittis 
 
    tempus lacus enim ac dui. <a href="#">Donec non enim</a> in turpis pulvinar facilisis. Ut felis.</p> 
 

 
    <h2>Header Level 2</h2> 
 

 
    <ol> 
 
    <li>Lorem ipsum dolor sit amet, consectetuer adipiscing elit.</li> 
 
    <li>Aliquam tincidunt mauris eu risus.</li> 
 
    </ol> 
 

 
    <blockquote> 
 
    <p>Lorem ipsum dolor sit amet, consectetur adipiscing elit. Vivamus magna. Cras in mi at felis aliquet congue. Ut a est eget ligula molestie gravida. Curabitur massa. Donec eleifend, libero at sagittis mollis, tellus est malesuada tellus, at luctus turpis 
 
     elit sit amet quam. Vivamus pretium ornare est.</p> 
 
    </blockquote> 
 

 
    <h3>Header Level 3</h3> 
 

 
    <ul> 
 
    <li>Lorem ipsum dolor sit amet, consectetuer adipiscing elit.</li> 
 
    <li>Aliquam tincidunt mauris eu risus.</li> 
 
    </ul> 
 

 
    <pre><code> 
 
#header h1 a { 
 
\t display: block; 
 
\t width: 300px; 
 
\t height: 80px; 
 
} 
 
</code></pre> 
 
</div> 
 
<div id="Menu2"> 
 
    <h1>HTML Ipsum Presents</h1> 
 

 
    <p><strong>Pellentesque habitant morbi tristique</strong> senectus et netus et malesuada fames ac turpis egestas. Vestibulum tortor quam, feugiat vitae, ultricies eget, tempor sit amet, ante. Donec eu libero sit amet quam egestas semper. <em>Aenean ultricies mi vitae est.</em> Mauris 
 
    placerat eleifend leo. Quisque sit amet est et sapien ullamcorper pharetra. Vestibulum erat wisi, condimentum sed, <code>commodo vitae</code>, ornare sit amet, wisi. Aenean fermentum, elit eget tincidunt condimentum, eros ipsum rutrum orci, sagittis 
 
    tempus lacus enim ac dui. <a href="#">Donec non enim</a> in turpis pulvinar facilisis. Ut felis.</p> 
 

 
    <h2>Header Level 2</h2> 
 

 
    <ol> 
 
    <li>Lorem ipsum dolor sit amet, consectetuer adipiscing elit.</li> 
 
    <li>Aliquam tincidunt mauris eu risus.</li> 
 
    </ol> 
 

 
    <blockquote> 
 
    <p>Lorem ipsum dolor sit amet, consectetur adipiscing elit. Vivamus magna. Cras in mi at felis aliquet congue. Ut a est eget ligula molestie gravida. Curabitur massa. Donec eleifend, libero at sagittis mollis, tellus est malesuada tellus, at luctus turpis 
 
     elit sit amet quam. Vivamus pretium ornare est.</p> 
 
    </blockquote> 
 

 
    <h3>Header Level 3</h3> 
 

 
    <ul> 
 
    <li>Lorem ipsum dolor sit amet, consectetuer adipiscing elit.</li> 
 
    <li>Aliquam tincidunt mauris eu risus.</li> 
 
    </ul> 
 

 
    <pre><code> 
 
#header h1 a { 
 
\t display: block; 
 
\t width: 300px; 
 
\t height: 80px; 
 
} 
 
</code></pre> 
 
</div> 
 
<div id="Menu3"> 
 
    <h1>HTML Ipsum Presents</h1> 
 

 
    <p><strong>Pellentesque habitant morbi tristique</strong> senectus et netus et malesuada fames ac turpis egestas. Vestibulum tortor quam, feugiat vitae, ultricies eget, tempor sit amet, ante. Donec eu libero sit amet quam egestas semper. <em>Aenean ultricies mi vitae est.</em> Mauris 
 
    placerat eleifend leo. Quisque sit amet est et sapien ullamcorper pharetra. Vestibulum erat wisi, condimentum sed, <code>commodo vitae</code>, ornare sit amet, wisi. Aenean fermentum, elit eget tincidunt condimentum, eros ipsum rutrum orci, sagittis 
 
    tempus lacus enim ac dui. <a href="#">Donec non enim</a> in turpis pulvinar facilisis. Ut felis.</p> 
 

 
    <h2>Header Level 2</h2> 
 

 
    <ol> 
 
    <li>Lorem ipsum dolor sit amet, consectetuer adipiscing elit.</li> 
 
    <li>Aliquam tincidunt mauris eu risus.</li> 
 
    </ol> 
 

 
    <blockquote> 
 
    <p>Lorem ipsum dolor sit amet, consectetur adipiscing elit. Vivamus magna. Cras in mi at felis aliquet congue. Ut a est eget ligula molestie gravida. Curabitur massa. Donec eleifend, libero at sagittis mollis, tellus est malesuada tellus, at luctus turpis 
 
     elit sit amet quam. Vivamus pretium ornare est.</p> 
 
    </blockquote> 
 

 
    <h3>Header Level 3</h3> 
 

 
    <ul> 
 
    <li>Lorem ipsum dolor sit amet, consectetuer adipiscing elit.</li> 
 
    <li>Aliquam tincidunt mauris eu risus.</li> 
 
    </ul> 
 

 
    <pre><code> 
 
#header h1 a { 
 
\t display: block; 
 
\t width: 300px; 
 
\t height: 80px; 
 
} 
 
</code></pre> 
 
</div> 
 
<div id="Menu4"> 
 
    <h1>HTML Ipsum Presents</h1> 
 

 
    <p><strong>Pellentesque habitant morbi tristique</strong> senectus et netus et malesuada fames ac turpis egestas. Vestibulum tortor quam, feugiat vitae, ultricies eget, tempor sit amet, ante. Donec eu libero sit amet quam egestas semper. <em>Aenean ultricies mi vitae est.</em> Mauris 
 
    placerat eleifend leo. Quisque sit amet est et sapien ullamcorper pharetra. Vestibulum erat wisi, condimentum sed, <code>commodo vitae</code>, ornare sit amet, wisi. Aenean fermentum, elit eget tincidunt condimentum, eros ipsum rutrum orci, sagittis 
 
    tempus lacus enim ac dui. <a href="#">Donec non enim</a> in turpis pulvinar facilisis. Ut felis.</p> 
 

 
    <h2>Header Level 2</h2> 
 

 
    <ol> 
 
    <li>Lorem ipsum dolor sit amet, consectetuer adipiscing elit.</li> 
 
    <li>Aliquam tincidunt mauris eu risus.</li> 
 
    </ol> 
 

 
    <blockquote> 
 
    <p>Lorem ipsum dolor sit amet, consectetur adipiscing elit. Vivamus magna. Cras in mi at felis aliquet congue. Ut a est eget ligula molestie gravida. Curabitur massa. Donec eleifend, libero at sagittis mollis, tellus est malesuada tellus, at luctus turpis 
 
     elit sit amet quam. Vivamus pretium ornare est.</p> 
 
    </blockquote> 
 

 
    <h3>Header Level 3</h3> 
 

 
    <ul> 
 
    <li>Lorem ipsum dolor sit amet, consectetuer adipiscing elit.</li> 
 
    <li>Aliquam tincidunt mauris eu risus.</li> 
 
    </ul> 
 

 
    <pre><code> 
 
#header h1 a { 
 
\t display: block; 
 
\t width: 300px; 
 
\t height: 80px; 
 
} 
 
</code></pre> 
 
</div> 
 
<div id="Menu5"> 
 
    <h1>HTML Ipsum Presents</h1> 
 

 
    <p><strong>Pellentesque habitant morbi tristique</strong> senectus et netus et malesuada fames ac turpis egestas. Vestibulum tortor quam, feugiat vitae, ultricies eget, tempor sit amet, ante. Donec eu libero sit amet quam egestas semper. <em>Aenean ultricies mi vitae est.</em> Mauris 
 
    placerat eleifend leo. Quisque sit amet est et sapien ullamcorper pharetra. Vestibulum erat wisi, condimentum sed, <code>commodo vitae</code>, ornare sit amet, wisi. Aenean fermentum, elit eget tincidunt condimentum, eros ipsum rutrum orci, sagittis 
 
    tempus lacus enim ac dui. <a href="#">Donec non enim</a> in turpis pulvinar facilisis. Ut felis.</p> 
 

 
    <h2>Header Level 2</h2> 
 

 
    <ol> 
 
    <li>Lorem ipsum dolor sit amet, consectetuer adipiscing elit.</li> 
 
    <li>Aliquam tincidunt mauris eu risus.</li> 
 
    </ol> 
 

 
    <blockquote> 
 
    <p>Lorem ipsum dolor sit amet, consectetur adipiscing elit. Vivamus magna. Cras in mi at felis aliquet congue. Ut a est eget ligula molestie gravida. Curabitur massa. Donec eleifend, libero at sagittis mollis, tellus est malesuada tellus, at luctus turpis 
 
     elit sit amet quam. Vivamus pretium ornare est.</p> 
 
    </blockquote> 
 

 
    <h3>Header Level 3</h3> 
 

 
    <ul> 
 
    <li>Lorem ipsum dolor sit amet, consectetuer adipiscing elit.</li> 
 
    <li>Aliquam tincidunt mauris eu risus.</li> 
 
    </ul> 
 

 
    <pre><code> 
 
#header h1 a { 
 
\t display: block; 
 
\t width: 300px; 
 
\t height: 80px; 
 
} 
 
</code></pre> 
 
</div>