Jquery, Find Div Class Name at a Certain Position While Scrolling

Scroll a div to a certain class name horizontally

A solution could be to use scrollLeft or animate if you want a sort of smooth animation.

var selectedPosition = $(".tab.selected").offset().left;
$(".navBar").scrollLeft(selectedPosition); // without animation.

$('.navBar').animate({scrollLeft: selectedPosition}, 400) // a solution with an animation

if ($('#pageE').length) {  $('.navBar .tab').removeClass('selected');  $('.navBar .tabE').addClass('selected');

  var selectedPosition = $(".tab.selected").offset().left;  $(".navBar").scrollLeft(selectedPosition); // without smooth.  // $('.navBar').animate({scrollLeft: selectedPosition}, 400) // a solution with smooth}

.navBar {    width: 100%;    color: #fff;    background: #000;    font-size: 0px;    padding: 15px 0;    text-align: center;    text-transform: uppercase;    overflow-x: scroll;    overflow-y: hidden;    white-space: nowrap;  }
  .navBar .tab {    letter-spacing: 2px;    display: inline-block;    font-size: 16px;    padding: 0 20px;    cursor: pointer;    position: relative;  }
  .navBar .tab a {    color: #fff;  }
  .navBar .tab.selected a:after {    content: "";    display: block;    background: red;    margin: 0 auto;    height: 5px;    width: 80px;    position: absolute;    bottom: -15px;    left: 0;    right: 0;    margin-left: auto;    margin-right: auto;  }

<script src="https://cdnjs.cloudflare.com/ajax/libs/jquery/3.3.1/jquery.min.js"></script><div class="navBar">  <div class="tab tabA">    <a href="pageA">Tab A</a>  </div>  <div class="tab tabB">    <a href="pageB">Tab B</a>  </div>  <div class="tab tabC">    <a href="pageC">Tab C</a>  </div>  <div class="tab tabD">    <a href="pageD">Tab D</a>  </div>  <div class="tab tabE">    <a href="pageE">Tab E</a>  </div></div>
<div id="pageE"></div>

Scroll jquery select just one class with the name, not all of them

You need to run through each element. JQuery has a useful method for that which is calld each().

        // your element
        banner = $('.travel__banner'); // your element

        // your scroll event
        $(window).scroll(function() {
            // assign the scrollTop of the window to a var
            var scrollTop = $(this).scrollTop(); 

            // run through each banner element
            banner.each(function(){ 
              // get the top position of the current banner element and assign it to a var
              var bannerTop = $(this).offset().top
              if ( scrollTop >= bannerTop ) {
                  // here you add your class
                  $(this).addClass('is-active');
                  banner.not($(this)).removeClass('is-active');
              } else {
                  // and here you remove it
                  $(this).removeClass('is-active');
              }
            });

        });

Here is a working example example:

banner = $('.travel__banner')
$(window).scroll(function() {      var scrollTop = $(this).scrollTop();       banner.each(function(){          var bannerTop = $(this).offset().top          if ( scrollTop >= bannerTop ) {              $(this).addClass('is-active');              banner.not($(this)).removeClass('is-active');          } else {              $(this).removeClass('is-active');          }       });            });

.travel__banner{  box-shadow:0px 3px 9px rgba(0,0,0,0.12);  padding:16px;}.travel__banner.is-active{  color:red;}.travel__banner.is-active:before{  content: "(is active) "}

<script src="https://cdnjs.cloudflare.com/ajax/libs/jquery/3.3.1/jquery.min.js"></script><div>  <div class="travel__banner">    My Banner  </div>  <p>    Paragraph in between  </p>  <p>    Paragraph in between  </p>  <p>    Paragraph in between  </p>  <p>    Paragraph in between  </p>
  <p>    Paragraph in between  </p>  <p>    Paragraph in between  </p>  <p>    Paragraph in between  </p>  <p>    Paragraph in between  </p>  <div class="travel__banner">    My Banner  </div>  <p>    Paragraph in between  </p>  <p>    Paragraph in between  </p>  <p>    Paragraph in between  </p>  <p>    Paragraph in between  </p>   <p>    Paragraph in between  </p>  <p>    Paragraph in between  </p>  <p>    Paragraph in between  </p>  <p>    Paragraph in between  </p>  <p>    Paragraph in between  </p>  <p>    Paragraph in between  </p>  <p>    Paragraph in between  </p>  <p>    Paragraph in between  </p>
  <p>    Paragraph in between  </p>  <p>    Paragraph in between  </p>  <p>    Paragraph in between  </p>  <p>    Paragraph in between  </p></div>

Detect when a div with fixed position crosses over another element

You have to take the div heights in account.

There is two "moments" to caculate, the enter and the leave.

So when the bottom of the fixed div enters the top of the scrolled one...

And when the bottom of the scrolled one leaves the top of the fixed.

Here is an example to run:

$(window).scroll(function(){  var fixed = $("div.fixed");    var fixed_position = $("div.fixed").offset().top;  var fixed_height = $("div.fixed").height();
  var toCross_position = $(".div-to-cross").offset().top;  var toCross_height = $(".div-to-cross").height();
  if (fixed_position + fixed_height  < toCross_position) {    fixed.removeClass('white');  } else if (fixed_position > toCross_position + toCross_height) {    fixed.removeClass('white');  } else {    fixed.addClass('white');  }
});

.fixed{  position:fixed;  top:calc(50% - 50px);  left:0;  background-color:black;  height:100px;  width:100%;}.white{  background-color:white;}.div-to-cross{  height:100px;  background-color:blue;}
/* just for this demo */.spacer{  height:400px;}

<script src="https://ajax.googleapis.com/ajax/libs/jquery/2.1.1/jquery.min.js"></script>
<div class="fixed"></div><div class="spacer"></div><div class="div-to-cross"></div><div class="spacer"></div>

Show div when on scroll and class called

You can use $(document).scroll(function() to detect a change in scroll position of the document. scrollTop() method will give the current top position of the document and position() is the method which returns an object containing position values and top is what we want in our case. We just want to compare current document top position and div top position.

if($(this).scrollTop()>=$('.content2').position().top){ which means the current document position is with in the top position of the div with class name .content2. now we can show nav2 and hide nav1. Otherwise show nav1 and hide nav2

  $(document).scroll(function() {
    if($(this).scrollTop()>=$('.content2').position().top){
      $("#nav2").show();
      $("#nav1").hide();
    }
    else {
      $("#nav1").show();
      $("#nav2").hide();
    }
  })

Fiddle: https://fiddle.jshell.net/tintucraju/rjjrmhvt/5/

Please note : position().top is calculated from the top to the parent if parent is relatively positioned. so there will be slight change in the top value. you can adjust by adding offset to $(this).scrollTop() and adjust to your desired position.

Updated Fiddle : https://fiddle.jshell.net/tintucraju/rjjrmhvt/6/

get new x/y positions of element after scroll using jQuery

The link element's position w.r.t. the document does not change when you scroll. To get the position of the element w.r.t. the window's top-left, you can take it's offset() and subtract the window's scrollTop form what you get:

var offset = $(".a1").offset();
var w = $(window);
alert("(x,y): ("+(offset.left-w.scrollLeft())+","+(offset.top-w.scrollTop())+")");

Demo: http://jsfiddle.net/xQh5J/10/

Add/remove class with jquery based on vertical scroll?

$(window).scroll(function() {    
    var scroll = $(window).scrollTop();

     //>=, not <=
    if (scroll >= 500) {
        //clearHeader, not clearheader - caps H
        $(".clearHeader").addClass("darkHeader");
    }
}); //missing );

Fiddle

Also, by removing the clearHeader class, you're removing the position:fixed; from the element as well as the ability of re-selecting it through the $(".clearHeader") selector. I'd suggest not removing that class and adding a new CSS class on top of it for styling purposes.

And if you want to "reset" the class addition when the users scrolls back up:

$(window).scroll(function() {    
    var scroll = $(window).scrollTop();

    if (scroll >= 500) {
        $(".clearHeader").addClass("darkHeader");
    } else {
        $(".clearHeader").removeClass("darkHeader");
    }
});

Fiddle

edit: Here's version caching the header selector - better performance as it won't query the DOM every time you scroll and you can safely remove/add any class to the header element without losing the reference:

$(function() {
    //caches a jQuery object containing the header element
    var header = $(".clearHeader");
    $(window).scroll(function() {
        var scroll = $(window).scrollTop();

        if (scroll >= 500) {
            header.removeClass('clearHeader').addClass("darkHeader");
        } else {
            header.removeClass("darkHeader").addClass('clearHeader');
        }
    });
});

Fiddle

Use jQuery to change a class dependent on scroll position

This seems to work with your site:

var $sections = $('section');  // all content sections
var $navs = $('nav > ul > li');  // all nav sections

var topsArray = $sections.map(function() {
    return $(this).position().top - 300;  // make array of the tops of content
}).get();                                 //   sections, with some padding to
                                          //   change the class a little sooner
var len = topsArray.length;  // quantity of total sections
var currentIndex = 0;        // current section selected

var getCurrent = function( top ) {   // take the current top position, and see which
    for( var i = 0; i < len; i++ ) {   // index should be displayed
        if( top > topsArray[i] && topsArray[i+1] && top < topsArray[i+1] ) {
            return i;
        }
    }
};

   // on scroll,  call the getCurrent() function above, and see if we are in the
   //    current displayed section. If not, add the "selected" class to the
   //    current nav, and remove it from the previous "selected" nav
$(document).scroll(function(e) {
    var scrollTop = $(this).scrollTop();
    var checkIndex = getCurrent( scrollTop );
    if( checkIndex !== currentIndex ) {
        currentIndex = checkIndex;
        $navs.eq( currentIndex ).addClass("selected").siblings(".selected").removeClass("selected");
    }
});

---

Related Topics