We Keep Coding

Add and Remove class on window scroll [duplicate]

So basically I'd like to remove the class from 'header' after the user scrolls down a little and add another class to change it's look.
Trying to figure out the simplest way of doing this but I can't make it work.
$(window).scroll(function() {
var scroll = $(window).scrollTop();
if (scroll <= 500) {
$(".clearheader").removeClass("clearHeader").addClass("darkHeader");
}
}
CSS
.clearHeader{
height: 200px;
background-color: rgba(107,107,107,0.66);
position: fixed;
top:200;
width: 100%;
}
.darkHeader { height: 100px; }
.wrapper {
height:2000px;
}
HTML
<header class="clearHeader"> </header>
<div class="wrapper"> </div>
I'm sure I'm doing something very elementary wrong.

$(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

Pure javascript
Here's javascript-only example of handling classes during scrolling.
const navbar = document.getElementById('navbar')
// OnScroll event handler
const onScroll = () => {
// Get scroll value
const scroll = document.documentElement.scrollTop
// If scroll value is more than 0 - add class
if (scroll > 0) {
navbar.classList.add("scrolled");
} else {
navbar.classList.remove("scrolled")
}
}
// Use the function
window.addEventListener('scroll', onScroll)
#navbar {
position: fixed;
top: 0;
left: 0;
right: 0;
width: 100%;
height: 60px;
background-color: #89d0f7;
box-shadow: 0px 5px 0px rgba(0, 0, 0, 0);
transition: box-shadow 500ms;
}
#navbar.scrolled {
box-shadow: 0px 5px 10px rgba(0, 0, 0, 0.25);
}
#content {
height: 3000px;
margin-top: 60px;
}
<!-- Optional - lodash library, used for throttlin onScroll handler-->
<script src="https://cdnjs.cloudflare.com/ajax/libs/lodash.js/4.17.15/lodash.js"></script>
<header id="navbar"></header>
<div id="content"></div>
Some improvements
You'd probably want to throttle handling scroll events, more so as handler logic gets more complex, in that case throttle from lodash lib comes in handy.
And if you're doing spa, keep in mind that you need to clear event listeners with removeEventListener once they're not needed (eg during onDestroy lifecycle hook of your component, like destroyed() for Vue, or maybe return function of useEffect hook for React).
Example throttling with lodash:
// Throttling onScroll handler at 100ms with lodash
const throttledOnScroll = _.throttle(onScroll, 100, {})
// Use
window.addEventListener('scroll', throttledOnScroll)

Add some transition effect to it if you like:
http://jsbin.com/boreme/17/edit?html,css,js
.clearHeader {
height:50px;
background:lightblue;
position:fixed;
top:0;
left:0;
width:100%;
-webkit-transition: background 2s; /* For Safari 3.1 to 6.0 */
transition: background 2s;
}
.clearHeader.darkHeader {
background:#000;
}

Its my code
jQuery(document).ready(function(e) {
var WindowHeight = jQuery(window).height();
var load_element = 0;
//position of element
var scroll_position = jQuery('.product-bottom').offset().top;
var screen_height = jQuery(window).height();
var activation_offset = 0;
var max_scroll_height = jQuery('body').height() + screen_height;
var scroll_activation_point = scroll_position - (screen_height * activation_offset);
jQuery(window).on('scroll', function(e) {
var y_scroll_pos = window.pageYOffset;
var element_in_view = y_scroll_pos > scroll_activation_point;
var has_reached_bottom_of_page = max_scroll_height <= y_scroll_pos && !element_in_view;
if (element_in_view || has_reached_bottom_of_page) {
jQuery('.product-bottom').addClass("change");
} else {
jQuery('.product-bottom').removeClass("change");
}
});
});
Its working Fine

Is this value intended? if (scroll <= 500) { ... This means it's happening from 0 to 500, and not 500 and greater. In the original post you said "after the user scrolls down a little"

In a similar case, I wanted to avoid always calling addClass or removeClass due to performance issues. I've split the scroll handler function into two individual functions, used according to the current state. I also added a debounce functionality according to this article: https://developers.google.com/web/fundamentals/performance/rendering/debounce-your-input-handlers
var $header = jQuery( ".clearHeader" );
var appScroll = appScrollForward;
var appScrollPosition = 0;
var scheduledAnimationFrame = false;
function appScrollReverse() {
scheduledAnimationFrame = false;
if ( appScrollPosition > 500 )
return;
$header.removeClass( "darkHeader" );
appScroll = appScrollForward;
}
function appScrollForward() {
scheduledAnimationFrame = false;
if ( appScrollPosition < 500 )
return;
$header.addClass( "darkHeader" );
appScroll = appScrollReverse;
}
function appScrollHandler() {
appScrollPosition = window.pageYOffset;
if ( scheduledAnimationFrame )
return;
scheduledAnimationFrame = true;
requestAnimationFrame( appScroll );
}
jQuery( window ).scroll( appScrollHandler );
Maybe someone finds this helpful.

For Android mobile $(window).scroll(function() and $(document).scroll(function() may or may not work. So instead use the following.
jQuery(document.body).scroll(function() {
var scroll = jQuery(document.body).scrollTop();
if (scroll >= 300) {
//alert();
header.addClass("sticky");
} else {
header.removeClass('sticky');
}
});
This code worked for me. Hope it will help you.

This is based of of #shahzad-yousuf's answer, but I only needed to compress a menu when the user scrolled down. I used the reference point of the top container rolling "off screen" to initiate the "squish"
<script type="text/javascript">
$(document).ready(function (e) {
//position of element
var scroll_position = $('div.mainContainer').offset().top;
var scroll_activation_point = scroll_position;
$(window).on('scroll', function (e) {
var y_scroll_pos = window.pageYOffset;
var element_in_view = scroll_activation_point < y_scroll_pos;
if (element_in_view) {
$('body').addClass("toolbar-compressed ");
$('div.toolbar').addClass("toolbar-compressed ");
} else {
$('body').removeClass("toolbar-compressed ");
$('div.toolbar').removeClass("toolbar-compressed ");
}
});
}); </script>

Set height to element dynamically and change height on window resizes using jQuery

I am working on a project where I need to set the height dynamically, means when the page loads the height must be set to itself and it's a responsive box, so when the browser window resizes the height increases but I am unable to fix it. I shared the script below. It's not something to calculate with window height or else, it should set and change the height based on window resizes. Any help?
<div class="item"></div>
<div class="item"></div>
<div class="item"></div>
<div class="item"></div>
var itemHeight = $('.item').height();
$('.item').each(function() {
$(this).css({
height: itemHeight + 'px'
});
});
$(window).on('resize', function(event) {
$('.item').each(function() {
$(this).css({
height: itemHeight + 'px'
});
});
});
Please see the jsfiddle:
https://jsfiddle.net/rj1xy1ue/

I will suggest you to use % instead of px. px will fix the value, but % will automatically compute the values based on the available viewport.
var itemHeight = 20; //Sample value
$('.item').each(function () {
$(this).css({
height: itemHeight + '%'
});
});
Simply, find the perfect value of itemHeight which is ideal for your case and then assign it. No need for extra resize event handler.
In your current code, in resize event you are assigning same value again which doesn't make any difference to the dimension. Hence you are not able to see the difference on resize.
Try this:
var itemHeight = $('.item').height();
function resizer() {
$('.item').each(function () {
$(this).css({
height: itemHeight + 'px'
});
});
}
$(window).on('resize', function (event) {
itemHeight = 350 //any different value
resizer();
});
Sample Demo: http://jsfiddle.net/lotusgodkk/GCu2D/822/
Note: Make sure you change the value of itemHeight in resize handler

What you are describing is called Responsive design.
A key idea in responsive design is to use percentages in place of px.
See these references:
WebDesignerWall on Responsive Design
CSS-Tricks question
for some ideas.
Note that using percentages for height is not as important as for width. You might also want to check out
Responsive Layouts with flexbox
On the jQuery side, you can use something like this:
var win = $(window);
$(function() {
win_size_recalc();
$(window).on('resize', function(){
win_size_recalc();
});
}); //end document.ready
function win_size_recalc(){
ww = win.width();
//EXAMPLE OF USE:
if (ww <= 550){
$('#header').css({'height':'50px'});
$('nav').css({'height':'55px'});
$('#headerstuff').css({'width':'98%'});
}else if (ww <= 650){
$('#headerstuff').css({'width':'98%'});
$('nav').css({'width':'98%'});
}else if (ww <= 770){
$('#headerstuff').css({'width':'90%'});
$('nav').css({'width':'90%'});
}else if (ww <= 850){
$('#headerstuff').css({'width':'90%'});
$('nav').css({'width':'90%'});
}else if (ww <= 900){
//etc etc
}
You might also want to check out CSS media queries, which is the CSS way of doing what we just did above using jQuery:
https://css-tricks.com/css-media-queries/
https://css-tricks.com/snippets/css/media-queries-for-standard-devices/
and more

I am not sure if I am able to understand your question correctly but I'll give a try based on what I could understand anyway.
You want the .item objects to resize on resize event of window object such that you want to start with whatever .height() these .item objects have, and then scale proportionally to the window height on resize.
If this is what you wanted, the solution is pretty simple. You calculate the difference in .height() of window object, and you add (or remove) that difference to the default .height() of .item objects.
Take a look at this jsFiddle and resize the height of the result panel to observe the difference in height of the .item objects. And tell me if this is what you were expecting the result to be.
The JavaScript used in the example is as below:
var items = $('.item');
var windowObject = $(window);
var defaultWinHeight = windowObject.height();
var defaultItemHeight = items.height();
items.css({ height: defaultItemHeight + 'px' });
windowObject.on('resize', function (event) {
var currWinHeight = windowObject.height();
var difference = currWinHeight - defaultWinHeight;
var itemHeight = defaultItemHeight + difference;
items.css({ height: itemHeight + 'px' });
});
Apologies if this is not what you were looking for. Hope it helps in some way though.
Update #1:
And here is another resulting jsFiddle of the same experiment but involving calculating percentages.
JavaScript:
var items = $('.item');
var windowObject = $(window);
var defaultWinHeight = windowObject.height();
var defaultItemHeight = items.height();
items.css({ height: defaultItemHeight + 'px' });
windowObject.on('resize', function (event) {
var currWinHeight = windowObject.height();
var currWinPercent = (currWinHeight/defaultWinHeight)*100;
var itemHeight = (currWinPercent/100)*defaultItemHeight;
items.css({ height: itemHeight + 'px' });
});

As others have noted, the main problem is you're only calculating itemHeight once. This fiddle shows a more modern way to use jQuery to achieve your goals (use on instead of bind):
http://jsfiddle.net/sean9999/7j4sz3wv/6/
$(function(){
"use strict";
var resizeBoxes = function(){
var padding = 25;
var parentHeight = $('body').height() - padding;
$('#debug').html( 'parent height = ' + parentHeight );
$('.item').css('height',parentHeight);
};
$(window).on('resize',resizeBoxes);
resizeBoxes();
});
body {
position: absolute;
height: 100%;
width: 100%;
margin: 0;
padding: 0;
background-color: #FED;
}
#debug {
width: 50%;
float: right;
height: 100%;
margin-top: 25%;
font-weight: bold;
color: navy;
}
.item {
min-width: 25px;
border: 2px solid blue;
background-color: silver;
min-height: 100px;
float: left;
margin: 10px;
}
<script src="https://ajax.googleapis.com/ajax/libs/jquery/2.1.0/jquery.min.js"></script>
<div class="item"></div>
<div class="item"></div>
<div class="item"></div>
<div id="debug"></div>

responsive issue jquery click slider

I have a click slide that goes back and forward through the images,
But it doesnt scale or act responsive when on smaller window because obviously the width is set absolutely with pixels in the CSS and as the variable in my function.
If i change this I'm not sure how it'll work though as it slides back and forth the width of each img (607px)
Anyone got ideas?? Or a better way to do this??
HTML:
<script src="https://ajax.googleapis.com/ajax/libs/jquery/1.9.1/jquery.min.js"></script>
<div id="slider">
<ul class="slides">
<li class="slide"><img src="images/banner1.jpg" class="img-responsive"></li>
<li class="slide"><img src="images/banner2.jpg" class="img-responsive"></li>
<li class="slide"><img src="images/banner3.jpg" class="img-responsive"></li>
<li class="slide"><img src="images/banner1.jpg" class="img-responsive"></li>
</ul>
</div>
CSS:
#slider {
width: 607px;
height: 248px;
overflow: hidden;
}
#slider .slides {
display: block;
width: 6000px;
height: 248px;
margin: 0px;
padding: 0px;
}
#slider .slide {
float: left;
list-style-type: none;
}
JS:
(function() {
var width = 607;
var slideSpeed = 300;
var currentSlide = 1;
var $slider = $('#slider');
var $slideContainer = $slider.find('.slides');
var $slides = $slideContainer.find('.slide');
var totalLength = $slides.length;
$('#button-next').on('click', function(){
$slideContainer.animate({'margin-left': '-='+width}, slideSpeed, function(){
currentSlide++;
if(currentSlide === $slides.length) {
currentSlide = 1;
$slideContainer.css('margin-left', '0');
}
});
});
$('#button-prev').on('click', function(){
if(currentSlide === 1) {
var pos = -1 * (width * ($slides.length -1));
$slideContainer.css('margin-left', pos);
$slideContainer.animate({'margin-left': '+='+width}, slideSpeed);
currentSlide = $slides.length - 1;
} else {
$slideContainer.animate({'margin-left': '+='+width}, slideSpeed);
currentSlide--;
}
});
});

In order to make the slider you have posted responsive you will need to set your fixed dimensions in your CSS to fluid width.
Like this:
.slider {
position: relative;
padding: 10px;
}
.slider-frame {
position: absolute;
left: 0;
top: 0;
width: 100%;
height: 100%;
white-space: nowrap;
}
.slide {
width: 100%;
display: inline-block;
}
.control {
width: 49%;
}
A wrote a very simple demo slider that hardly has any functionality just to serve the purpose of this explanation:
http://codepen.io/nicholasabrams/pen/aOLoYM
Resize your screen. The slides stay the width of the screen because the .slide and .slider are both set to 100% of the screens width.
Dont forget to add your own functionality for next and prev that adjusts each slide progression distance according to the width of the slides in the slider.
Also see here:
How to make a image slider responsive?
And this is a good tutorial with somewhat quality code used. The slide comes out usable as well!
http://www.barrelny.com/blog/building-a-jquery-slideshow-plugin-from-scratch/
Hope this helps!
UPDATE:
Since the OP stated that the issue is with the js I dug up a simple slider I wrote a while back, here is the javascript/jQuery:
$(function(){
$.fn.someCustomSlider = function (autoplay, velocity){
var sliderProps = [
// props n methods, accessible through data-slider-* attributes
{
settings : {
invokeBecause : $('[data-widget~="slider"]'),
autoplay : autoplay,
speed : velocity,
},
bindings : {
slideRail : $('[data-function~="slide-rail"]'),
nextButton : $('[data-function~="next"]'),
prevButton : $('[data-function~="prev"]'),
playButton : $('[data-function~="play"]'),
pauseButton : $('[data-function~="pause"]'),
stopButton : $('[data-function~="stop"]')
// attach this functionality to the DOM
},
methods : {
slideNext : function(){ slideRail.animate({left: '-=100%'}, velocity) },
slidePrev : function(){ slideRail.animate({left: '+=100%'}, velocity) },
slideRestart : function(){ slideRail.animate({left: '0%'}, velocity) },
pause : function(){ window.sliderTimer = setInterval(slideNext, velocity) }
}
}
]
$.each(sliderProps, function(){
// iterate through all of the slider objects properties
window.SliderProps = this;
// set slider props to be accessible to the global scope
});
// slider props stored as vars
var slideRail = SliderProps.bindings.slideRail;
var play = SliderProps.bindings.playButton;
var next = SliderProps.bindings.nextButton;
var prev = SliderProps.bindings.prevButton;
var pause = SliderProps.bindings.pauseButton;
var stop = SliderProps.bindings.stopButton;
var i = 0;
function slideNext(){
var slideNext = SliderProps.methods.slideNext();
}
function slidePrev(){
var slidePrev = SliderProps.methods.slidePrev();
}
function slideStop(){
/*slideRail.stop(); */
window.clearInterval( sliderTimer )
}
function slideRestart(){
var slidePrev = SliderProps.methods.slideRestart();
slideRail.stop();
window.clearInterval( sliderTimer )
}
function autoPlay(){
SliderProps.methods.pause()
}
// elemen -> event delegation -> function()
next.click(slideNext)
prev.click(slidePrev)
stop.click(slideRestart)
pause.click(slideStop)
play.click(autoPlay)
} // close function slider()
someCustomSlider(true, 1000);
});
http://codepen.io/anon/pen/eytrh
This was a basic version that I eventually extended but for simplicity sake, this should be just perfect I imagine.

When working with responsive design, thinking in terms of pixels is a bad practice.
Give your slider and each slide a width of 100vw instead of 607px. That would make it equivalent to one "viewport width". In your JavaScript try modifying the width variable to be the string 100vw as well. Make sure to include the unit.
For more information on CSS units refer here.

Javascript scroll doesn't stop

hi everyone i'm trying to do simple scroll share box widget but it doesn't work. It must stop on special div (stopscroll), but it don't stop and scrolling down until web page footer. any ideas why?
var windw = this;
$.fn.followTo = function ( elem ) {
var $this = this,
$window = $(windw),
$bumper = $(elem),
bumperPos = $bumper.offset().top,
thisHeight = $this.outerHeight(),
setPosition = function(){
if ($window.scrollTop() <= (bumperPos - thisHeight)) {
$this.css({
position: 'absolute',
top: (bumperPos - thisHeight)
});
} else {
$this.css({
position: 'fixed',
top: 0
});
}
};
$window.resize(function()
{
bumperPos = pos.offset().top;
thisHeight = $this.outerHeight();
setPosition();
});
$window.scroll(setPosition);
setPosition();
};
$('#share_box').followTo('#stopscroll');
but it doesn't stop on the div #stopscroll.
css file looks like that:
#share_box{
background: none repeat scroll 0% 0% #E1E1E1;
position: fixed;
width: 65px;
padding: 15px;
border-radius: 5px 0px 0px 5px;
left: 1.89%;}
any ideas?
here is jsfiddle http://jsfiddle.net/NCY6x/

There are lots of syntax and variable mistakes in your code...
I have updated the fiddle with a working and simpler demo: http://jsfiddle.net/NCY6x/2/
$.fn.followTo = function ( elem ) {
var stopper = $(elem);
var box = this;
$(window).on("scroll resize", function(){
var x_distance = (stopper.offset().top- box.outerHeight());
if($(window).scrollTop() >= x_distance){
box.css({"position": "absolute", "top": x_distance});
} else {
box.css({"position": "fixed", "top": 0});
}
});
};
$('#share_box').followTo('#stopscroll');

Well, in your Fiddle you haven't actually loaded jQuery, and then when loaded I get an error saying pos is not defined, which I think refers to the following line:
bumperPos = pos.offset().top;
pos doesn't appear to be set anywhere
Edit:
There were some other issues with your script. See here for a version that I think works as you intend http://jsfiddle.net/R5z6j/1/
I removed the padding on the top of #stopscroll as that doesn't move the element down so the top position was always being set to 18px (see the console output)
Edit 2:
http://jsfiddle.net/R5z6j/5/ - as you'll probably actually want it this way round

jQuery sticky div misbehaving

I'm using a bit of code to keep a sidebar element in view (and within the bounds of its parent) while scrolling and am having a bit of a problem. I have multiple articles on a page (approximately 10), each with it's own sidebar. The markup looks like this:
<article>
<section class="project-details entry-content">
<header>
...
</header>
</section>
<section class="offset-by-four twelve columns">
...
</section>
</article>
And the CSS:
article {
padding-top: 2em;
position: relative; }
article .project-details {
margin: 0 10px;
position: absolute;
width: 220px; }
... and finally, the Javascript:
$.fn.persistent = function(options) {
var opts = $.extend({
duration: 0,
lockBottom: true
},
options),
elements = [];
this.each(function() {
var parentPaddingTop = parseInt($(this).parent().css('paddingTop'));
$(this).data({
'parentPaddingTop': parentPaddingTop,
'startOffset': $(this).parent().offset().top
}).css({
position: 'absolute'
});
if (opts.lockBottom) {
var bottomPos = $(this).parent().height() - $(this).height() + parentPaddingTop;
if (bottomPos < 0) {
bottomPos = 0;
}
$(this).data('bottomPos', bottomPos);
}
elements.push($(this));
});
$(window).scroll(function() {
var pastStartOffset = $(document).scrollTop() > opts.startOffset;
$.each(elements,
function() {
var parentPaddingTop = $(this).data('parentPaddingTop'),
startOffset = $(this).data('startOffset'),
bottomPos = $(this).data('bottomPos');
$(this).stop();
var objFartherThanTopPos = $(this).offset().top > startOffset,
objBiggerThanWindow = $(this).outerHeight() < $(window).height();
if ((pastStartOffset || objFartherThanTopPos) && objBiggerThanWindow) {
var newpos = ($(document).scrollTop() - startOffset + parentPaddingTop);
if (newpos > bottomPos) {
newpos = bottomPos;
}
if ($(document).scrollTop() < startOffset) {
newpos = parentPaddingTop;
}
$(this).animate({
top: newpos
}, opts.duration);
}
}
);
});
};
It's the .project-details DIV that should remain sticky, but for some reason only the first one on the page works and the rest do nothing. Occasionally the second will start to work while scrolling down the page and then will fail about halfway through.
Can anyone see any glaring flaws with this code that might cause such behavior?

check the following code and make sure you understand that n is each element, using this instead a each function does not refer to the current element if that makes sense.
this.each(function(i,n) {
var parentPaddingTop = parseInt($(n).parent().css('paddingTop'));
$(n).data({
'parentPaddingTop': parentPaddingTop,
'startOffset': $(n).parent().offset().top
}).css({
position: 'absolute'
});
if (opts.lockBottom) {
var bottomPos = $(n).parent().height() - $(n).height() + parentPaddingTop;
if (bottomPos < 0) {
bottomPos = 0;
}
$(n).data('bottomPos', bottomPos);
}
elements.push($(n));
});