Change CSS After Scrolling

Change css header after scrolling

Assuming you want to change the CSS after scrolling beyond a certain point, and then revert the CSS once you've scrolled back to a certain point, with jQuery:

$(window).scroll(function() {

    //After scrolling 100px from the top...
    if ( $(window).scrollTop() >= 100 ) {
        $('#logo').css('display', 'none');
        $('#menuheader').css('margin', '65px auto 0');

    //Otherwise remove inline styles and thereby revert to original stying
    } else {
        $('#logo, #menuheader').attr('style', '');

    }
});

Then all you need to do is swap out 100 with whatever point (how many pixels down from the top, while scrolling) you want the CSS to be swapped at.

http://jsfiddle.net/dJh8w/4/

Change the value of CSS style when scrolled

I would suggest to use CSS over jquery like below

$(document).ready(function() {
  $(".navbar-inverse .navbar-nav>li>a").mouseover(function() {    var scroll = $(window).scrollTop();    if (scroll > 36) {      $(this).css("color", "red"); //Working      $(this).css("border-bottom-color", "rgb(2, 1, 131)");    } else {      $(this).css("color", "black"); //Working      $(this).css("border-bottom-color", "rgb(2,1,131)");    }  });    $(".navbar-inverse .navbar-nav>li>a").mouseleave(function() {    var scroll = $(window).scrollTop();    if (scroll > 36) {      $(this).css("color", "black");       $(this).css("border-bottom-color", "transparent");    } else {      $(this).css("color", "black");      $(this).css("border-bottom-color", "transparent");    }  });  })

.navbar-inverse .navbar-nav>li>a {  color: black;  padding-left: 30px;  font-weight: bold;  border-bottom: 3px solid transparent;  transition: border-bottom-color 0.5s ease-in-out;  -webkit-transition: border-bottom-color 0.5s ease-in-out;}
.navbar-inverse .navbar-nav>li>a:hover {  color: rgb(2, 1, 131);  border-bottom-color: rgb(2, 1, 131);}
body {  height: 600px;}

<script src="https://ajax.googleapis.com/ajax/libs/jquery/2.1.1/jquery.min.js"></script><nav class="navbar navbar-inverse" data-spy="affix" data-offset-top="36">  <div class="container-fluid">    <div class="navbar-header">      <button type="button" class="navbar-toggle" data-toggle="collapse" data-target="#myNavbar">        <span class="icon-bar"></span>        <span class="icon-bar"></span>        <span class="icon-bar"></span>       </button>      <a class="navbar-brand" href="http://www.serbizcooperative.com/"><img src="img/logo.png" class="logo" width="400px"></a>      <img src="img/gear.png" class="gear" width="15px">      <img src="img/lightning.png" class="lightning" width="25px">    </div>    <div class="collapse navbar-collapse" id="myNavbar">      <ul class="nav navbar-nav">        <li><a href="#">Home</a></li>        <li><a href="#">About Us</a></li>        <li><a href="#">Careers</a></li>        <li><a href="#">Clients</a></li>      </ul>      <ul class="nav navbar-nav navbar-right">        <li><a href="#">Team</a></li>        <li><a href="#">HR Express</a></li>        <li><a href="#">Activities</a></li>        <li><a href="#">Contact Us</a></li>      </ul>    </div>  </div></nav>

JS (No Jquery) - Change CSS when scrolled to a set point

This demo may help you!
It doesn't use jQuery.

Here is the javascript code:

window.onscroll = function() {
    var nav = document.getElementById('nav');
    if ( window.pageYOffset > 100 ) {
        nav.classList.add("navbar1");
    } else {
        nav.classList.remove("navbar1");
    }
}

Change CSS class after scrolling 1000px down

Your braces are wrong in your example, but regardless, you can simplify your code:

CSS:

#menu {
    display : none;
    position : fixed;
}

JS:

 $(document).scroll(function() {
    $('#menu').toggle($(this).scrollTop()>1000)
 });​ 

Demo: http://jsfiddle.net/elclanrs/h3qyV/1/

JavaScript to change CSS dynamically when scrolling

The error was because I didn't add 'px' string when setting new CSS values.
So, the js code would be:

import './style.css'

function parallel_height_js(){
  let scroll_top = window.scrollY;
  let header_height = document.getElementsByClassName("sample-header-section")[0].clientHeight;
  document.getElementsByClassName("text-section")[0].style.marginTop = header_height+'px';
  document.getElementsByClassName("sample-header")[0].style.height = (header_height - scroll_top)+'px';
}
parallel_height_js();

window.onscroll = parallel_height_js;
window.onresize = parallel_height_js;

HTML:

<header>
        <div class="sample-header">
          <div class="...">
            <input type="checkbox" id="menu" />
            <label for="menu"></label>
            <div class="menu-content">
              <ul>
                <li><a href="">Contact</a> </li>
                <li><a href="">About Us</a> </li>
              </ul>
            </div>
          </div>
          <div class="sample-header-section">
            <h1>...</h1>
            <h2>...</h2>
          </div>
        </div>
      </header>

How to change CSS when user scrolls past a certain div

What you need to do is calculate the offset height of each specific DIV with respect to the top of the page or scrollable area.

Then, using your .scroll() function, when the offset is reached (i.e. the 'div' offset matches the 'scroll' position) you can fire your animation off.

Also, (based on a slightly different offset (e.g. div offset -600px) you could 'reset' the animation if the user scrolls back up the page, past the animation. Although, this might end being annoying to the user and more work than benefit . . .

offset : http://api.jquery.com/offset/

scrollTop : http://api.jquery.com/scrolltop/

jQuery change css of element depending on scroll position

.offset()

.offset() returns an object containing the properties top and left.

and you should be checking for .sec-2 instead of .sec-1

Try something like

$(document).ready(function() {
        var button = $(".sec-2"); //get offset of second div
        var offset = button.offset().top; //check for top property
        $(function () {
            $(window).scroll(function () {
                if ($(window).scrollTop() >= offset) {
                    $(".menu-button").css("color","black");
                } else {
                    $(".menu-button").css("color","white");

                }
            });
        });
});

Change css by scrolling down and up

it is working for me ...
https://jsfiddle.net/vjc3t1d2/

 $(document).scroll(function() {
       if($(window).scrollTop() > 50){

        $("#headerline").css("background","red");
        $("#header").hide();
        $("#header2").show();

       }else if($(window).scrollTop() < 50){

        $("#headerline").css("background","blue");
        $("#header2").hide();
        $("#header").show();

       }
});

Change CSS element with JQuery when scroll reaches an anchor point

Try this:

var targetOffset = $("#anchor-point").offset().top;

var $w = $(window).scroll(function(){
    if ( $w.scrollTop() > targetOffset ) {   
        $('#voice2').css({"border-bottom":"2px solid #f4f5f8"});
        $('#voice3').css({"border-bottom":"2px solid #2e375b"});
    } else {
      // ...
    }
});

---

Related Topics