I'm trying to change color to a header when it reaches a certain scroll. I use this script with jQuery:
var $document = jQuery(document),
$element = jQuery('#header'),
className = 'red';
$document.scroll(function() {
$element.toggleClass(className, $document.scrollTop() >= 400);
});
That works on every browser, except for IE8. Does IE8 does not support the toggleClass? How can I solve it?
Any help would be appreciated. Thanks
jsFiddle: http://jsfiddle.net/itzuki87/e4XTw/
in IE: http://jsfiddle.net/itzuki87/e4XTw/show/
The problem is $(document) is read different in IE. IE prefers you to use $(window). You'll find the following to be much more cross-browser compatible.
$(function() {
$(window).scroll(function(e) {
$("#header").toggleClass("red", $(this).scrollTop() >= 400);
});
})
Or using your variable type setup:
jQuery(function() {
var $window = jQuery(window),
$element = jQuery("#header"),
className = "red";
$window.scroll(function(e) {
$element.toggleClass(className, jQuery(this).scrollTop() >= 400);
});
})
See working in IE8! and more (Safari, FF, Chrome, Opera)!
Using my smaller HTML
Related
I'm trying to change the Z index of an image according to the scroll position,currently in chrome (but it should be working on all broswers).
anyway, it's not working on chrome, unless I get into inspection mode and I don't understand why it's only working in inspection mode?
this is the script:
$( window ).scroll(function() {
var scrollTop = $(window).scrollTop();
if ($(this).scrollTop()>700) {
document.getElementById("back-ground-image").style.zIndex = "-9";
console.log("-9");
} else {
document.getElementById("back-ground-image").style.zIndex = "-19";
console.log("-19");
}
});
Problem
What you need is $(document) not $(window).
By default, you scroll the $(document), not the $(window).
However, when you open your Chrome DevTools, the $(window) is not being scrolled which is why your code works.
To fix the issue, change $(window).scroll() to $(document).scroll() and $(window).scrollTop() to $(document).scrollTop()
Improvements
1. Use jQuery functions
Also, if you're already using jQuery, why not use jQuery selectors and .css():
$("#back-ground-image").css('zIndex', '-9')
instead of
document.getElementById("back-ground-image").style.zIndex = "-9";
2. Use DRY code
(Don't Repeat Yourself)
If you follow recommendation #1, why not set $("#back-ground-image") to a variable instead of repeating it twice.
$(document).scroll(function() {
var scrollTop = $(document).scrollTop(),
$bkImg = $("#back-ground-image");
if ($(this).scrollTop() > 700) {
$bkImg.css('zIndex', '-9');
console.log("-9");
} else {
$bkImg.css('zIndex', '-19');
console.log("-19");
}
});
Otherwise, you could use:
$(document).scroll(function() {
var scrollTop = $(document).scrollTop(),
background = document.getElementById("back-ground-image");
if ($(this).scrollTop()>700) {
background.style.zIndex = "-9";
console.log("-9");
} else {
background.style.zIndex = "-19";
console.log("-19");
}
});
I want to change the logo of my navbar on scroll using css. It already changes color on scroll using the .affix class provided by bootstrap.
<img class="limg" src="images/firstlogo.png" />
Only way i found how to do this was:
#custom-nav.affix .limg{
content: url(../images/secondlogo.png);}
which works perfectly on chrome. However it doesnt work on Firefox / IE / Microsoft Edge.
There seems to be a solution using ::before and ::after prefixes but those didnt work for me.
It could be caused by the following JS code which implements the affix class on scroll.
$(window).scroll(function() {
if ($(".navbar").offset().top > 50) {
$('#custom-nav').addClass('affix');
$(".navbar-fixed-top").addClass("top-nav-collapse");
} else {
$('#custom-nav').removeClass('affix');
$(".navbar-fixed-top").removeClass("top-nav-collapse");
}
});
If so, is there anyway i can change that <img src""> using JS when affix activates ?
Just change your image src attribute in scroll callback:
var startImg = "images/firstlogo.png",
scrollImg = "images/secondlogo.png",
$img = $('.limg');
$(window).scroll(function() {
if ($(".navbar").offset().top > 50) {
$('#custom-nav').addClass('affix');
$(".navbar-fixed-top").addClass("top-nav-collapse");
// Set scrolling src
$img.attr('src', scrollImg);
} else {
$('#custom-nav').removeClass('affix');
$(".navbar-fixed-top").removeClass("top-nav-collapse");
// Set default image src
$img.attr('src', startImg);
}
});
Example with timeout
As mentioned bellow, it may cause some performance problems because of many calls to DOM elements, so heres improved version with timeout and cached DOM vars:
var startImg = "images/firstlogo.png",
scrollImg = "images/secondlogo.png",
$navBar = $(".navbar"),
$customNav = $('#custom-nav'),
$navBar = $(".navbar-fixed-top"),
$img = $('.limg'),
timeout;
$(window).on('scroll', function() {
if (timeout) clearTimeout(timeout)
// Use timeout to not call function immediately
timeout = setTimeout(function() {
if ($navBar.offset().top > 50) {
$customNav.addClass('affix');
$navBar.addClass("top-nav-collapse");
// Set scrolling src
$img.attr('src', scrollImg);
} else {
$customNav.removeClass('affix');
$navBar.removeClass("top-nav-collapse");
// Set default image src
$img.attr('src', startImg);
}
}, 250)
});
content property should only works in ::before and ::after pseudoelements. If it's working on Chrome this way, Chrome has a bug (as usual).
Write as this:
.affix .limg::before {
content: url(../images/secondlogo.png);
}
It should work in all browsers.
More info:
MDN: https://developer.mozilla.org/en-US/docs/Web/CSS/content
CSSTricks: https://css-tricks.com/almanac/properties/c/content/
Yesterday I had an issue with a JQuery scrolling script that worked in Chrome but not in IE and Firefox. I asked this query (JQuery scroll() / scrollTop() not working in IE or Firefox) yesterday which I marked as being the correct answer only to realise today that it doesn't work in Chrome anymore!
Can anyone help me get this working on all modern browsers?
HTML
<div id="dotted-line">
<div id="up-arrow">^up</div>
</div>
JQuery
//get window size values (cross browser compatible)
(function(undefined) {
var container = $("html,body");
$.windowScrollTop = function(newval) {
if( newval === undefined) {
return container.scrollTop();
}
else {
return container.scrollTop(newval);
}
}
})();
//draw dotted line on scroll
$(window).scroll(function(){
if ($.windowScrollTop() > 10) {
var pos = $.windowScrollTop();
$('#dashes').css('height',pos/4);
$('#footer-dot').css('top',pos/4);
} else {
$('#dashes').css('height','6px');
$('#footer-dot').css('top','-150px');
}
});
scrollTop() will return value of only first matched element in set
$('html,body'), that's why it no more works on chrome
I think your best bet would be to use:
var container = $(document.scrollingElement || "html");
I'm using this code to make the left column match the right column's height if left column is shorter than right column. It works on Chrome and Firefox, and on Safari, if seem to ignore the if statement and just execute the code anyway.
(function($) {
$(window).load(function() {
var rightHeight = $('.rightcolumn').height();
var leftHeight = $('.leftcolumn').height();
if (leftHeight < rightHeight) {
$('.leftcolumn').height(rightHeight);
}
})
})(jQuery);
Changing your code to this:
$(document).ready(function(){
var rightHeight = $('.rightcolumn').height();
var leftHeight = $('.leftcolumn').height();
if(leftHeight < rightHeight) {
$('.leftcolumn').height(rightHeight);
}
});
Seems to do the trick for safari.
See this fiddle
The following example of making a position : fixed does not work in my FF16.02 / IE9. But as far as I known, it should be crossbrowser compatible.
Any Ideas?
JSfiddle of the issue
The problem lies in document.body.scrollTop. That is not cross-browser compatible. Use window.scrollY, and it should work perfectly fine.
Your code would change to this:
var foo = document.getElementById('foo');
document.onscroll = function(e) {
if (window.scrollY > foo.offsetTop) {
foo.className = "foo sticky";
} else {
if (foo.className.indexOf('sticky')) {
foo.className = "foo";
}
}
};
Demo
Updated open this i updated
you have to set
position:fixed in foo div too
i think this is the solution