ani_css ani_css - 2 months ago 4
CSS Question

getting value of the section area?

for example this page if you checkout on responsive you are going to see as soon as page scroll to down.and I'm trying to do with scrollspy (affix fixed navigation) I have bootstrap navbar navigation and on responsive if I'm on related area section of navbar must change with name of related area I design this page - please check on responsive but I have no any idea how to do it

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

well. i had some spare time and i made this for you :

see here > JSFiddle

first part of the code gives the .active class to the a menu element that has been clicked and moves the scroll nicely to the section that corresponds to the clicked a (menu) element

 $("#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;
    });

second part finds the section you are in when you scroll down the page, and gets the text of the H1 in that section ( the name of the section) and gives it to the the button

$(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)
                 }
    });
 });

let me know if this is what you were looking for

see also snippet below :

        $("#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)
                     }
            });
 });


   
.navbar-header button { position:fixed;color:#fff;text-align:center;;width:100%;}
.navbar-nav { margin-top:50px;}
#section1 { margin-top:100px;}
<script src="https://netdna.bootstrapcdn.com/bootstrap/3.0.0/js/bootstrap.min.js"></script>
<link href="https://netdna.bootstrapcdn.com/bootstrap/3.0.0/css/bootstrap.min.css" rel="stylesheet"/>
<script src="https://ajax.googleapis.com/ajax/libs/jquery/2.1.1/jquery.min.js"></script>
<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">Section 1
      </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>
        </ul>
      </div>
    </div>
  </div>
</nav>

<div id="section1" class="section 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="section 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="section 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>