0

I need to remove and add a class at a specific point on a page but that point is different on each page so "if (scroll >= 300)" doesn't work for all pages. Is there a way to do this based on scroll to a section id?

$(function() {
//caches a jQuery object containing the content element
var content = $(".isi-fixed");
$(window).scroll(function() {
    var scroll = $(window).scrollTop();

    if (scroll >= 300) {
        content.removeClass('isi-fixed').addClass("isi");
    } else {
        content.removeClass("isi").addClass('isi-fixed');
    }
});

My css is

.isi-fixed {
width: 100%;
height: 20%;
bottom: 0px;
right: 0px;
padding: 50px;
opacity: 0.5;
overflow-y: scroll;
visibility: visible;
display: block;
z-index: 500 !important;
position: fixed;    
background-color: #E7E7E7;
 }

and

.isi {
width: 100%;
padding: 50px;
visibility: visible;
position: relative;
background-color: #E7E7E7;
 }
TKCS
  • 1
  • 1
    It is always helpful if you can provide a minimal example, also with the relevant html code, so we can see what you did try until now. – rsz Feb 26 '20 at 19:07
  • Check if this question/answer helps https://stackoverflow.com/questions/487073/how-to-check-if-element-is-visible-after-scrolling or https://stackoverflow.com/questions/123999/how-can-i-tell-if-a-dom-element-is-visible-in-the-current-viewport/7557433#7557433 – Allende Feb 26 '20 at 20:22

0 Answers0