获得部分区域的价值？

Question

for example this page如果你在看到响应，你会看到页面滚动到down.and我正在尝试使用scrollspy（附加固定导航）我有引导导航栏导航和响应，如果我导航栏的相关区域部分必须更改我设计的this page - please check on responsive相关区域的名称，但我不知道该怎么做

HTML

<nav class="navbar navbar-inverse navbar-fixed-top">
  <div class="container-fluid">
    <div class="navbar-header">
        <button type="button" class="navbar-toggle" data-toggle="collapse" data-target="#myNavbar">
          <span>Section 1</span>
      </button>
    </div>
    <div>
      <div class="collapse navbar-collapse" id="myNavbar">
        <ul class="nav navbar-nav">
          <li><a href="#section1">Section 1</a></li>
          <li><a href="#section2">Section 2</a></li>
          <li><a href="#section3">Section 3</a></li>
          </li>
        </ul>
      </div>
    </div>
  </div>
</nav>

<div id="section1" class="container-fluid">
  <h1>Section 1</h1>
  <p>Try to scroll this section and look at the navigation bar while scrolling! Try to scroll this section and look at the navigation bar while scrolling!Try to scroll this section and look at the navigation bar while scrolling! Try to scroll this section and look at the navigation bar while scrolling!Try to scroll this section and look at the navigation bar while scrolling! Try to scroll this section and look at the navigation bar while scrolling!Try to scroll this section and look at the navigation bar while scrolling! Try to scroll this section and look at the navigation bar while scrolling!</p>

</div>
<div id="section2" class="container-fluid">
  <h1>Section 2</h1>
  <p>Try to scroll this section and look at the navigation bar while scrolling! Try to scroll this section and look at the navigation bar while scrolling!</p>
  <p>Try to scroll this section and look at the navigation bar while scrolling! Try to scroll this section and look at the navigation bar while scrolling!Try to scroll this section and look at the navigation bar while scrolling! Try to scroll this section and look at the navigation bar while scrolling!Try to scroll this section and look at the navigation bar while scrolling! Try to scroll this section and look at the navigation bar while scrolling!Try to scroll this section and look at the navigation bar while scrolling! Try to scroll this section and look at the navigation bar while scrolling!</p> 
</div>
<div id="section3" class="container-fluid">
  <h1>Section 3</h1>
  <p>Try to scroll this section and look at the navigation bar while scrolling! Try to scroll this section and look at the navigation bar while scrolling!Try to scroll this section and look at the navigation bar while scrolling! Try to scroll this section and look at the navigation bar while scrolling!Try to scroll this section and look at the navigation bar while scrolling! Try to scroll this section and look at the navigation bar while scrolling!</p>

</div>

JS

  $("#myNavbar ul>li >a").click(function() {
        $(this).addClass("active");
        $("#myNavbar ul li a").not(this).removeClass("active");
        var TargetId = $(this).attr('href');
        $('html, body').animate({
            scrollTop: $(TargetId).offset().top - 100
        }, 1000, 'swing');
        return false;
    });

         $(window).scroll(function(){     
// close dropdown nav after click on other section  
   $(".navbar-collapse a").click(function () { 
        $(".navbar-collapse").removeClass('in').addClass("collapse");
   }); 



   $(".affix-area").each(function() {
            var sectionID = $(this).attr("id");

            var sectionHeight = $(this).outerHeight();
            var sectionTop = $(this).offset().top - 180 ;

            if ($(window).scrollTop() > sectionTop - 1 && $(window).scrollTop() < sectionTop + sectionHeight - 1) {
                 var uu = $(this).find("h1").text();
                 $(".navbar-header button").text(uu)
                 }
    });
 });

Answer 1

好。我有一些空余时间，我为你做了这个：

见这里＆gt;的 JSFiddle

代码的

第一部分将.active类提供给已单击的a菜单元素，并将滚动条很好地移动到对应的section点击a（菜单）元素

 $("#myNavbar ul>li >a").click(function() {
        $(this).addClass("active");
        $("#myNavbar ul li a").not(this).removeClass("active");
        var TargetId = $(this).attr('href');
        $('html, body').animate({
            scrollTop: $(TargetId).offset().top - 100
        }, 1000, 'swing');
        return false;
    });

第二部分找到您向下滚动页面时所在的部分，并获取该部分中H1的文本（部分的名称）并将其提供给{{ 1}}

button

让我知道这是否是您正在寻找的

另见下面的代码段：

＆＃13;

＆＃13;

$(window).scroll(function(){     
// close dropdown nav after click on other section  
   $(".navbar-collapse a").click(function () { 
        $(".navbar-collapse").removeClass('in').addClass("collapse");
   }); 



   $(".section").each(function() {
            var sectionID = $(this).attr("id");

            var sectionHeight = $(this).outerHeight();
            var sectionTop = $(this).offset().top - 180 ;

            if ($(window).scrollTop() > sectionTop - 1 && $(window).scrollTop() < sectionTop + sectionHeight - 1) {
                 var uu = $(this).find("h1").text();
                 $(".navbar-header button").text(uu)
                 }
    });
 });

＆＃13;

        $("#myNavbar ul>li >a").click(function() {
            $(this).addClass("active");
            $("#myNavbar ul li a").not(this).removeClass("active");
            var TargetId = $(this).attr('href');
            $('html, body').animate({
                scrollTop: $(TargetId).offset().top - 100
            }, 1000, 'swing');
            return false;
        });
        
          $(window).scroll(function(){       
$(".navbar-collapse a").click(function () {
            $(".navbar-collapse").removeClass('in').addClass("collapse");
    }); 



           $(".section").each(function() {
                var sectionID = $(this).attr("id");
               
                var sectionHeight = $(this).outerHeight();
                var sectionTop = $(this).offset().top - 180 ;
         
                if ($(window).scrollTop() > sectionTop - 1 && $(window).scrollTop() < sectionTop + sectionHeight - 1) {
                     var uu = $(this).find("h1").text();
                     $(".navbar-header button").show().text(uu)
                     }
            });
 });


   

＆＃13;

.navbar-header button { position:fixed;color:#fff;text-align:center;;width:100%;}
.navbar-nav { margin-top:50px;}
#section1 { margin-top:100px;}

＆＃13;

＆＃13;

＆＃13;