Twitter bootstrap 自举Scrollspy&；平滑卷轴_Twitter Bootstrap_Navbar_Smooth Scrolling_Scrollspy

Twitter bootstrap 自举Scrollspy&；平滑卷轴

twitter-bootstrap

Twitter bootstrap 自举Scrollspy&；平滑卷轴,twitter-bootstrap,navbar,smooth-scrolling,scrollspy,Twitter Bootstrap,Navbar,Smooth Scrolling,Scrollspy,我在scrollspy和平滑滚动方面遇到了一些问题。请记住，我对这件事还不熟悉，只是对我的谷歌浏览器很在行。：）这个问题很令人沮丧，在过去的几天里，我尝试了很多不同的解决方案，但似乎没有一个奏效。我使用引导scrollspy和平滑滚动在单页上有4个部分。每个部分在导航栏中都有自己的glyphicon，滚动到该部分时，该图标应变为粉红色。当我单击第二个图标时，它会按预期工作。当我点击第三个按钮时，第二个按钮保持粉红色，即处于活动状态。当我点击第四个时，第三个变成白色，第二个保持粉红色。此外，手动

我在scrollspy和平滑滚动方面遇到了一些问题。请记住，我对这件事还不熟悉，只是对我的谷歌浏览器很在行。：）

这个问题很令人沮丧，在过去的几天里，我尝试了很多不同的解决方案，但似乎没有一个奏效。我使用引导scrollspy和平滑滚动在单页上有4个部分。每个部分在导航栏中都有自己的glyphicon，滚动到该部分时，该图标应变为粉红色。当我单击第二个图标时，它会按预期工作。当我点击第三个按钮时，第二个按钮保持粉红色，即处于活动状态。当我点击第四个时，第三个变成白色，第二个保持粉红色。此外，手动滚动时，只有前两个图标会改变颜色。如果你自己看到这种行为，可能会更容易

这是我的密码

<html>
<body data-spy="scroll" data-offset="50" data-target=".navbar">

<link rel="stylesheet" href="http://maxcdn.bootstrapcdn.com/bootstrap/3.3.6/css/bootstrap.min.css">

<script src="https://ajax.googleapis.com/ajax/libs/jquery/1.12.0/jquery.min.js"></script>
<script src="http://maxcdn.bootstrapcdn.com/bootstrap/3.3.6/js/bootstrap.min.js"></script>

<script type="text/javascript">

$(document).ready(function() {
    // navigation click actions 
    $('.scroll-link').on('click', function(event){
        event.preventDefault();
        var sectionID = $(this).attr("data-id");
        scrollToID('#' + sectionID, 750);
    });
    // scroll to top action
    $('.scroll-top').on('click', function(event) {
        event.preventDefault();
        $('html, body').animate({scrollTop:0}, 'slow');         
    });
    // mobile nav toggle
    $('#nav-toggle').on('click', function (event) {
        event.preventDefault();
        $('#main-nav').toggleClass("open");
    });
});
// scroll function
function scrollToID(id, speed){
    var offSet = 0;
    var targetOffset = $(id).offset().top - offSet;
    var mainNav = $('#main-nav');
    $('html,body').animate({scrollTop:targetOffset}, speed);
    if (mainNav.hasClass("open")) {
        mainNav.css("height", "1px").removeClass("in").addClass("collapse");
        mainNav.removeClass("open");
    }
}

if (typeof console === "undefined") {
    console = {
        log: function() { }
    };
}

</script>


<style>

@import url(https://fonts.googleapis.com/css?family=Poiret+One);

.google {
  font-family:"Poiret One",sans-serif;
}

.navbar .navbar-brand {
    color: white !important;
}

.navbar .navbar-nav > li > a {
   color: white;
   padding: 20px 30px 10px 30px;
}

.navbar {
   background-color: transparent;
   background: transparent;
   border-color: transparent;
   padding-top: 30px;
   color: white;
}

.navbar .nav > li.current-menu-item > a, .navbar .nav > li.current-menu-ancestor > a, 
.navbar .nav > li > a:hover, .navbar .nav > li > a:focus {
   background-color: rgba(255,255,255,0);
   color: pink;
}

ul.nav li.active a {
    color: pink;
}

.glyphicon {
    font-size: 20px;
}

.navbar-toggle .icon-bar {
    display: block;
    width: 22px;
    height: 2px;
    border-radius: 1px;
    background-color: white /* change this to any color you want! */;
}

#first {
  background: url(http://i1055.photobucket.com/albums/s503/pgrigorakis/wallpaper-1948122_zpsjnr4n9n2.jpg) no-repeat bottom left;
  -webkit-background-size: cover;
  -moz-background-size: cover;
  -o-background-size: cover;
  background-size: cover;

}

#second {
  background: url(http://i1055.photobucket.com/albums/s503/pgrigorakis/meteora-10_zps7j9jqszn.jpg) no-repeat bottom left;
  -webkit-background-size: cover;
  -moz-background-size: cover;
  -o-background-size: cover;
  background-size: cover;
}

#third {
  background: url(http://i1055.photobucket.com/albums/s503/pgrigorakis/duesseldorf_wertig_zps1hk1ollh.jpg) no-repeat bottom left;
  -webkit-background-size: cover;
  -moz-background-size: cover;
  -o-background-size: cover;
  background-size: cover;
}


#fourth{
  background: url(https://i.ytimg.com/vi/24i8G5a5d5Q/maxresdefault.jpg) no-repeat bottom left;
  -webkit-background-size: cover;
  -moz-background-size: cover;
  -o-background-size: cover;
  background-size: 100% 100%;
  width: 100%; 
  height: 90%;
  min-height:90%;
}

html, body, #first, #second, #third, #fourth {
    height: 100%;
}

#myName {

    font-weight: bold;
    font-size: 50px;
}

@media (max-width: 768px){
  .navbar-nav li{
    text-align: right;
  }
}

html, #first, #second, #third, #fourth {
    height: 100%;
}

body {
  position: relative;
}

#myName {

    font-weight: bold;
    font-size: 50px;
}

@media (max-width: 768px){
  .navbar-nav li{
    text-align: right;
  }
}

</style>



  <nav role="navigation" class="navbar navbar-fixed-top">

    <div class="container-fluid">
      <div class="navbar-header">
        <button type="button" class="navbar-toggle collapsed" data-toggle="collapse" data-target=".navbar-collapse">
        <span class="icon-bar"></span>
        <span class="icon-bar"></span>
        <span class="icon-bar"></span>
        <span class="icon-bar"></span>   
      </button>
        <a class="navbar-brand google" href="#" style="margin-left:80px" id="myName">PANAGIOTIS</a>
      </div>
      <div class="navbar-collapse collapse pull-right" style="margin-right:50px">
        <ul class="nav navbar-nav">
          <li><a class="scroll-link" data-id="first" href="#first"><span class="glyphicon glyphicon-home" id="ul-selected"></span></a></li>
          <li><a class="scroll-link" data-id="second" href="#second"><span class="glyphicon glyphicon-user" id="ul-selected"></span></a></li>
          <li><a class="scroll-link" data-id="third" href="third"><span class="glyphicon glyphicon-th" id="ul-selected"></span></a></li>
          <li><a class="scroll-link" data-id="fourth" href="fourth"><span class="glyphicon glyphicon-envelope" id="ul-selected"></span></a></li>
        </ul>
      </div>
    </div>
    </div>
  </nav>

  <section id="first">
    <div class="container-fluid">
      <div class="row">
        <div class="col-md-12">
          <h1></h1>
        </div>
      </div>
    </div>
  </section>

  <section id="second">
    <div class="container-fluid">
      <div class="row">
        <div class="col-md-12">
          <h1></h1>
        </div>
      </div>
    </div>
  </section>

  <section id="third">
    <div class="container-fluid">
      <div class="row">
        <div class="col-md-12">
          <h1></h1>
        </div>
      </div>
    </div>
  </section>

  <section id="fourth">
    <div class="container-fluid">
      <div class="row">
        <div class="col-md-12">
          <h1></h1>
        </div>
      </div>
    </div>
  </section>

</body>
</html>


$（文档）.ready（函数（）{
//导航单击操作
$（'.scroll link'）。在（'click'，函数（事件）{
event.preventDefault（）；
var sectionID=$（this.attr（“数据id”）；
scrollToID（“#”+sectionID，750）；
});
//滚动到顶部操作
$（'.scroll top'）。在（'click'，函数（事件）{
event.preventDefault（）；
$（'html，body'）。动画（{scrollTop:0}，'slow'）；
});
//移动导航开关
$（“#导航切换”）。打开（'click'，函数（事件）{
event.preventDefault（）；
$（'主导航'）.toggleClass（“打开”）；
});
});
//滚动功能
功能滚动id（id、速度）{
var偏移=0；
var targetOffset=$（id）.offset（）.top-offset；
var mainNav=$（“#main nav”）；
$（'html，body'）.animate（{scrollTop:targetOffset}，speed）；
如果（mainNav.hasClass（“打开”））{
mainNav.css（“高度”、“1px”）.removeClass（“in”）.addClass（“折叠”）；
主导航移除类（“打开”）；
}
}
如果（控制台类型==“未定义”）{
控制台={
日志：函数（）{}
};
}
@导入url(https://fonts.googleapis.com/css?family=Poiret+一),；
.谷歌{
字体系列：“Poiret One”，无衬线；
}
.navbar.navbar品牌{
颜色：白色！重要；
}
.navbar.navbar nav>li>a{
颜色：白色；
填充：20px 30px 10px 30px；
}
navbar先生{
背景色：透明；
背景：透明；
边框颜色：透明；
填充顶部：30px；
颜色：白色；
}
.navbar.nav>li.current-menu-item>a、.navbar.nav>li.current-menu-enter>a，
.navbar.nav>li>a:悬停，.navbar.nav>li>a:聚焦{
背景色：rgba（255255,0）；
颜色：粉红色；
}
ul.nav li.active a{
颜色：粉红色；
}
.字形图标{
字体大小：20px；
}
.导航栏切换.图标栏{
显示：块；
宽度：22px；
高度：2倍；
边界半径：1px；
背景色：白色/*将其更改为您想要的任何颜色！*/；
}
#首先{
背景：url(http://i1055.photobucket.com/albums/s503/pgrigorakis/wallpaper-1948122_zpsjnr4n9n2.jpg)无重复左下角；
-webkit背景尺寸：封面；
-moz背景尺寸：封面；
-o-背景尺寸：封面；
背景尺寸：封面；
}
#第二{
背景：url(http://i1055.photobucket.com/albums/s503/pgrigorakis/meteora-10_zps7j9jqszn.jpg)无重复左下角；
-webkit背景尺寸：封面；
-moz背景尺寸：封面；
-o-背景尺寸：封面；
背景尺寸：封面；
}
#第三{
背景：url(http://i1055.photobucket.com/albums/s503/pgrigorakis/duesseldorf_wertig_zps1hk1ollh.jpg)无重复左下角；
-webkit背景尺寸：封面；
-moz背景尺寸：封面；
-o-背景尺寸：封面；
背景尺寸：封面；
}
#第四{
背景：url(https://i.ytimg.com/vi/24i8G5a5d5Q/maxresdefault.jpg)无重复左下角；
-webkit背景尺寸：封面；
-moz背景尺寸：封面；
-o-背景尺寸：封面；
背景大小：100%100%；
宽度：100%；
身高：90%；
最小高度：90%；
}
html，正文，第一，第二，第三，第四{
身高：100%；
}
#我的名字{
字体大小：粗体；
字体大小：50px；
}
@介质（最大宽度：768px）{
.navbar nav li{
文本对齐：右对齐；
}
}
html，第一，第二，第三，第四{
身高：100%；
}
身体{
位置：相对位置；
}
#我的名字{
字体大小：粗体；
字体大小：50px；
}
@介质（最大宽度：768px）{
.navbar nav li{
文本对齐：右对齐；
}
}

更新：您的代码工作正常，只是在导航列表中没有正确设置锚点ID

href=“third”

和

href=“fourth”

应该是

href=“#third”

和

href=“#fourth”

请参阅工作示例代码段

$（文档）.ready（函数（）{
//导航单击操作
$（'.scroll link'）。在（'click'，函数（事件）{
event.preventDefault（）；
var sectionID=$（this.attr（“数据id”）；
scrollToID（“#”+sectionID，750）；
});
//滚动至顶部操作
$（'.scroll top'）。在（'click'，函数（事件）{
event.preventDefault（）；
$（'html，body'）。设置动画({
滚动顶部：0
}“慢”）；
});
//移动导航开关
$（“#导航切换”）。打开（'click'，函数（事件）{
event.preventDefault（）；
$（'主导航'）.toggleClass（“打开”）；
});
});
//滚动功能
功能滚动id（id、速度）{
var偏移=0；
var targetOffset=$（id）.offset（）.top-offset；
var mainNav=$（“#main nav”）；
$（'html，body'）。设置动画({
scrollTop:targetOffset
}，速度）；
如果（mainNav.hasClass（“打开”））{
mainNav.css（“高度”、“1px”）.removeClass（“in”）.addClass（“折叠”）；
主导航移除类（“打开”）；
}
}
if（typeo）