If scrolled 300 px change background color - javascript

I have a fixed nav that is grey. But I want it to change colour to white if you have scrolled 300 px.
Demo: http://eldecosmetics.com/blogs/vemund
Password: Pruget

Use this code:
window.addEventListener('scroll', function () {
var scrollTop = document.body.scrollTop || document.documentElement.scrollTop;
var nav = document.getElementById('scroll-nav');
if (scrollTop >= 300) {
nav.style.backgroundColor = 'grey';
} else {
nav.style.backgroundColor = '#f9f7f1';
}
}, false);

window.addEventListener("scroll", function(event) {
var top = this.scrollY;
if(top > 300) {
// Do Something
}
else {
// Rollback to previous state?
}
}, false);
You can do it like that

Related

How can I control the mouse scroll event and after that do an animation on the html, body?

I'm facing a very strange error, which is animation on body during mouse scroll. I think its happening because of the jQuery event window.scroll. I have tried a lot of things like unbinding of animation on mouse scroll, but nothing works. Below is my code.
$(document).on("scroll", function () {
var lastScrollTop = 0;
var windowHeight = $(window).scrollTop();
var seccion1 = $("#seccion1").height();
var seccion2 = $("#seccion2").offset().top;
var alturaseccion2 = $("#seccion2").height();
//this function returns in which section is the user with the scroll
var localizacion = comprobarSeccion(seccion1, seccion2);
if (windowHeight > lastScrollTop) {
// down scroll
console.log("scrollabajo");
if (localizacion == 1) {
$("html, body").animate({
scrollTop: $("#seccion2").offset().top
}, 2);
$(document).bind("scroll");
} else if (localizacion == 2) {
if (windowHeight >= ((alturaseccion2 * 0.80) + seccion2) && windowHeight <= (alturaseccion2 + seccion2)) {
} else {
}
}
} else {
// up scroll
console.log("scrollarriba");
}
lastScrollTop = windowHeight;
});
ยดยดยด
I'm not sure what you are trying to accomplish, but if your trying to trigger an event with a specific scroll value you can use the code below
$(window).scroll(function () {
var scroll = $(window).scrollTop();
if (scroll >= 500) {
alert("scroll is greater than 500 px)
} else if(scroll==500){
alert("scroll has hit 500px");
}
});

Need to set the minimum width for Click & drag column headers

I need to set the maximum width for the table header while click and drag.
I had tried the max-width and width in the css.
th {
position: relative;
max-width: 5px;
}
But no use on that. Here is the link for my code:
https://codepen.io/jasongardner/pen/QNOXym
I need to fix the width for drag the table for certain distance.
I have fixed your problem. Change your Javascript to this:
$(function() {
var startX,
startWidth,
$handle,
$table,
pressed = false;
$(document).on({
mousemove: function(event) {
if (pressed) {
var newWidth = startWidth + (event.pageX - startX);
if (newWidth > 300) {
$handle.width(300);
} else {
$handle.width(startWidth + (event.pageX - startX));
}
}
},
mouseup: function() {
if (pressed) {
$table.removeClass('resizing');
pressed = false;
}
}
}).on('mousedown', '.table-resizable th', function(event) {
$handle = $(this);
pressed = true;
startX = event.pageX;
startWidth = $handle.width();
$table = $handle.closest('.table-resizable').addClass('resizing');
}).on('dblclick', '.table-resizable thead', function() {
// Reset column sizes on double click
$(this).find('th[style]').css('width', '');
});
});
This is the code I changed:
if (pressed) {
var newWidth = startWidth + (event.pageX - startX);
if (newWidth > 300) {
$handle.width(300);
} else {
$handle.width(startWidth + (event.pageX - startX));
}
}
I created the variable "newWidth" and check if it's bigger than 300. Only when it's smaller, it sets the new width. So actually you can just replace the 300 with any number you want to define as the max-width.
Hope this helps

How not to execute JavaScript code when the screen has a specific size?

I am using the following to add and remove CSS classes based on the current scroll position:
$(function() {
var header = $(".grid-bar");
$(window).scroll(function() {
var scroll = $(window).scrollTop();
if (scroll >= 400) {
header.addClass("move");
} else {
header.removeClass("move");
}
});
});
But I want to disable the addition and removal of the CSS classes on a screen size smaller than 800px.
I have tried wrapping the code in a resize function but after I do so, it stops responding at all:
$(window).resize(function(){
if ($(window).width() => 800){
var header = $(".grid-bar");
$(window).scroll(function() {
var scroll = $(window).scrollTop();
if (scroll >= 400) {
header.addClass("move");
} else {
header.removeClass("move");
}
});
}
});
As others have mentioned, you have an improper operator for "greater than or equal to". The following is incorrect:
if ($(window).width() => 800) {
// ^^ this operator is wrong
if ($(window).width() >= 800) {
// ^^ it should be like this
Also, you need to bind and unbind the scroll handler whenever the screen size changes. You will need to keep track of whether or not the scroll handler is bound or not. Here is what that looks like:
const $window = $(window);
const $header = $(".grid-bar");
let isBound = false;
const scrollHandler = function() {
const scroll = $window.scrollTop();
if (scroll >= 400) {
header.addClass("move");
} else {
header.removeClass("move");
}
}
$(window).resize(function(){
if ($window.width() >= 800) {
if (!isBound) {
$window.on('scroll', scrollHandler);
isBound = true;
}
} else if (isBound) {
$window.off('scroll', scrollHandler);
isBound = false;
}
});
$window.trigger('resize');
Here is a fiddle: https://jsfiddle.net/1mru359x/5/

How to make two different functions work on window resize

I want to make a sticky banner, which becomes fixed at top when it is scrolled and unsticks at the end of the page. The document height is dependent upon images, that's why I use window load event. I have the following code:
function saleBanner() {
$(window).bind("load", function() {
// Make sale banner fixed-at-top
var s = $('.sale-container');
var pos = s.offset();
var maxTop = $(document).outerHeight() - 828 - s.outerHeight(); // 828 is the total height of site footer and sign up form
function fixedBanner() {
var currentTop = $(window).scrollTop();
if (currentTop >= pos.top && currentTop < maxTop) {
s.attr("style", ""); //kill absolute positioning
s.addClass('fixed-at-top'); //stick it
} else if (currentTop >= maxTop) {
s.removeClass('fixed-at-top'); //un-stick
s.css({bottom: 0}); //set sticker right above the footer
} else {
s.removeClass('fixed-at-top'); //top of page
}
}
$(window).scroll(fixedBanner);
});
}
saleBanner();
I want to make this function work on window resize as well. So I added the following code:
function resizeBanner() {
var viewportWidth = $(window).width();
if (viewportWidth > 767) {
saleBanner();
}
}
I have one more function resizeWindow for mobile menu, which I also need to work on window resize. So when I put this two functions together, they don't work (although they work on window resize separately):
$(window).resize(function(e) {
resizeWindow(e);
resizeBanner(e);
});
Where is my mistake? How can I make both functions work on window resize?
Update: Here is the whole code for resizeWindow function. It's rather long, but may be it would be helpful for the answer.
// Mobile menu
var MQM = 768;
var viewportWidth = $(window).width();
function navSlide() {
var headerHeight = $('.cd-header').height();
$(window).on('scroll', {previousTop: 0}, function () {
var currentTop = $(window).scrollTop();
//check if user is scrolling up
if (currentTop < this.previousTop ) {
//if scrolling up...
if (currentTop > 0 && $('.cd-header').hasClass('is-fixed')) {
$('.cd-header').addClass('is-visible');
} else {
$('.cd-header').removeClass('is-visible is-fixed');
}
} else {
//if scrolling down...
if(!$('.cd-header').hasClass('menu-is-open')) {
$('.cd-header').removeClass('is-visible');
}
if( currentTop > headerHeight && !$('.cd-header').hasClass('is-fixed')) $('.cd-header').addClass('is-fixed');
}
this.previousTop = currentTop;
});
}
// Primary navigation slide-in effect on load
if(viewportWidth < MQM) {
navSlide();
}
function addOverflow() {
$('html').addClass('overflow-hidden');
$('body').addClass('overflow-hidden');
}
function removeOverflow() {
$('html').removeClass('overflow-hidden');
$('body').removeClass('overflow-hidden');
}
function hideHeader() {
$('.cd-header').removeClass('is-fixed is-visible');
}
function hideMenu() {
$('.cd-header').removeClass('menu-is-open is-fixed is-visible');
$('.cd-menu-icon').removeClass('is-clicked');
}
function resizeWindow() {
var viewportWidth = $(window).width();
$(window).off('scroll'); // unbind scroll event
if (viewportWidth > 767) {
if ($('.cd-primary-nav').hasClass('is-visible')) {
if ($('.algolia__search-content').hasClass('algolia__search-content--active')) {
hideMenu();
$('.search-trigger').addClass('is-clicked');
$('.search-header').addClass('is-fixed');
} else {
hideMenu();
if (!$('.js-algolia__input').is(':focus')) {
$('.cd-primary-nav').removeClass('is-visible').one('webkitTransitionEnd otransitionend oTransitionEnd msTransitionEnd transitionend',function(){
removeOverflow();
});
$('.search-trigger').removeClass('is-clicked');
$('.search-header').removeClass('is-fixed');
} else {
$('.search-trigger').addClass('is-clicked');
$('.search-header').addClass('is-fixed');
}
}
} else {
hideHeader();
}
} else {
navSlide();
if ($('.cd-primary-nav').hasClass('is-visible')) {
$('.cd-header').addClass('menu-is-open');
$('.cd-menu-icon').addClass('is-clicked');
$('.search-trigger').removeClass('is-clicked');
$('.search-header').removeClass('is-fixed');
}
}
}

manipulate when inview.js is firing

i would like to know how i can manipulate the inview.js script that the moment when its fired is not at first pixels in viewport, and the last when the element is going out but rather for example 50pixels later or earlier.
the script of inview.js is
(function ($) {
function getViewportHeight() {
var height = window.innerHeight; // Safari, Opera
var mode = document.compatMode;
if ( (mode || !$.support.boxModel) ) { // IE, Gecko
height = (mode == 'CSS1Compat') ?
document.documentElement.clientHeight : // Standards
document.body.clientHeight; // Quirks
}
return height;
}
$(window).scroll(function () {
var vpH = getViewportHeight(),
scrolltop = (document.documentElement.scrollTop ?
document.documentElement.scrollTop :
document.body.scrollTop),
elems = [];
// naughty, but this is how it knows which elements to check for
$.each($.cache, function () {
if (this.events && this.events.inview) {
elems.push(this.handle.elem);
}
});
if (elems.length) {
$(elems).each(function () {
var $el = $(this),
top = $el.offset().top,
height = $el.height(),
inview = $el.data('inview') || false;
if (scrolltop > (top + height) || scrolltop + vpH < top) {
if (inview) {
$el.data('inview', false);
$el.trigger('inview', [ false ]);
}
} else if (scrolltop < (top + height)) {
if (!inview) {
$el.data('inview', true);
$el.trigger('inview', [ true ]);
}
}
});
}
});
// kick the event to pick up any elements already in view.
// note however, this only works if the plugin is included after the elements are bound to 'inview'
$(function () {
$(window).scroll();
});
})(jQuery);
all credits go to here
my attemp was to add a value to offset top top = $el.offset().top + 50, which works! but how can i change the value for the bottom up?
thanks ted
I'd recommend using http://imakewebthings.com/jquery-waypoints/
Which you can call like so to achieve your desired effect at 10% from the bottom:
$('.flyIn').waypoint(function() {
$(this).removeClass('hidden');
$(this).addClass('animated fadeInUp');
}, { offset: '90%' });

Categories