Change Element Style on Page Scroll

Change Element Style On Page Scroll

Use: display:block; and display:none;

jsFiddle DEMO

Add this to your CSS:

#logo-scroll{ display:none; position:fixed; }

jQ:

var $logo = $('#logo-scroll');
$(document).scroll(function() {
    $logo.css({display: $(this).scrollTop()>100 ? "block":"none"});
});

BTW: on TC page it's just a CSS play with z-indexes. nothing more. all elements are visible at page load, it's just the scroll that makes appear a z-index lower element beneath the big logo.

In plain Javascript would be like this:

var win = window,
    docEl = document.documentElement,
    $logo = document.getElementById('logo-scroll');

win.onscroll = function(){
   var sTop = (this.pageYOffset || docEl.scrollTop)  - (docEl.clientTop || 0);
   $logo.style.display =  sTop > 100 ? "block":"none" ;
};

is there a way to change fixed element style when enter any section element on scroll

this is the solution I was looking for I did it using Intersection Observer

   document.addEventListener('DOMContentLoaded',()=>{
    let options = {
      root:null,
      rootMargin:"-570px 0px -100px 0px",
      threshold:0.05

    };

  let Observer= new IntersectionObserver(changColor,options);
    document.querySelectorAll("section").forEach(section => {
      Observer.observe(section);
    });
  });

function changColor(elements) {
elements.forEach(el => {
   if (el.isIntersecting) {
    let elbg=el.target.dataset.bg;
 
    if (elbg=="blue") { //if section data-bg== blue
     
      // change svg button style
         document.getElementById("chatting_path_7").style.fill = "#fff";
         document.getElementById("to_top_Ellipse_4").style.stroke = "#fff";
    } else {
        document.getElementById("chatting_path_7").style.fill = "#034ea2";
        document.getElementById("to_top_Ellipse_4").style.stroke = "#034ea2";
    }
  }
})

}

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: change style based in scroll position

Well you need to calculate top offset a little differently

window.onscroll = function() {
    var doc = document.documentElement;
    var top = (window.pageYOffset || doc.scrollTop)  - (doc.clientTop || 0);
    if(top <= 99) {
       jQuery("header#main-header").css('background-color', 'red');
    }
    else {
       jQuery("header#main-header").css('background-color', 'yellow');
    }
} 

Dynamically change style on page scroll

Your CodePen works, just a slight mistake in your JS. Instead of $('$output').css({'letter-spacing': distance}), it should be $output.css({'letter-spacing': distance})

EDIT:
The goal is to have large letter spacings that converge to zero the closer the text gets to the top of the page as we scroll. Note the Math.max($(this).offset().top - scrollTop, 0) which is used to ensure that the letter-spacing doesn't turn negative. Then it is divided by 20; that's an arbitrary number, it's just to scale back the letter spacing as the distance is very large.

var $output = $("h1");

function changeLetterSpacing() {
    var scrollTop     = $(window).scrollTop(),
        elementOffset = $("h1").offset().top;
    $output.css('letter-spacing', function(d) { 
        return Math.max($(this).offset().top - scrollTop, 0)/20 + "px"; 
    })
}

$(window).on('scroll', function () {
    changeLetterSpacing();
});
changeLetterSpacing();

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>

---

Related Topics