i use YS for fixed position menu, is working fine in firefox but not working in IE.
$(function(){ // this is the shorthand for document.ready
$(document).scroll(function(){ // this is the scroll event for the document
scrolltop = $(document).scrollTop(); // by this we get the value of the scrolltop ie how much scroll has been don by user
if(parseInt(scrolltop) >= 80) // check if the scroll value is equal to the top of navigation
{
$("#navbar").css({"position":"fixed","top":"0"}); // is yes then make the position fixed to top 0
}
else
{
$("#navbar").css({"position":"absolute","top":"80px"}); // if no then make the position to absolute and set it to 80
}
}
}
Any solution fixing this problem for ie?
The problem, to me seems to be that IE doesn't trigger the .scroll event. At least, not in jsfiddle. If you explicitly trigger the event, that does seem to fix things. this fiddle was tested in IE8 and it works. The code:
$(function()
{
$(document).scroll(function()
{//add var here, avoid evil globals:
var scrolltop = $(document).scrollTop();
if(parseInt(scrolltop) >= 80)
{
$("#navbar").css({"position":"fixed","top":"0"});
}
else
{
$("#navbar").css({"position":"absolute","top":"80px"});
}
});//close properly
$(document).scroll();//explicit call
});//close this, too
You are missing ')' in your code working jsfiddle (tested in IE7 and IE9)
$(function(){ // this is the shorthand for document.ready
$(window).scroll(function(){ // this is the scroll event for the document
scrolltop = $(window).scrollTop(); // by this we get the value of the scrolltop ie how much scroll has been don by user
if(parseInt(scrolltop) >= 80) // check if the scroll value is equal to the top of navigation
{
$("#navbar").css({"position":"fixed","top":"0"}); // is yes then make the position fixed to top 0
}
else
{
$("#navbar").css({"position":"absolute","top":"80px"}); // if no then make the position to absolute and set it to 80
}
}); //here
});//here
For position fix must your parent element has this style
position:relative;
best regards
Related
I have a function to let a container jump to the top upon scrolling 100px, and jump back in position once scrolled to the top again. I am working to disable this on smaller devices but the code I use also breaks the behaviour.
$(window).scroll(function() {`
//After scrolling 100px from the top...
if ( $(window).scrollTop() >= 72 || w > 920 ) {
$('#container').css('top', '0px');
//Otherwise remove inline styles and thereby revert to original stying
} else {
$('#container').attr('style', '');
}
});
UPDATE: this code should actually make the container jump to the former position when you scroll to the top again. The problem is in 'w > 920'. I need that to disable the behaviour on smaller devices but it also breaks the function. I guess because of the 'AND' statement. The window width stays the same so possible because of that the revert breaks.
Not working fiddle
https://jsfiddle.net/xm1yq4to/
Working fiddle
https://jsfiddle.net/s15g7nup/
Is there another way to specify the devicewidth for this?
I ended up doing this in a different way bij not checking the device with but a change of class
$(document).ready(function() {
// run test on initial page load
checkSize();
// run test on resize of the window
$(window).resize(checkSize);
});
//Function to the css rule
function checkSize(){
if ($(".desktop-menu").css("display") == "block" ){
$(window).scroll(function() {
//After scrolling 100px from the top...
if ( $(window).scrollTop() >= 100 ) {
$('#container').css('top', '0px');
}
//Otherwise remove inline styles and thereby revert to original stying
else {
$('#container').attr('style', '');
}
});
}
return false;
};
I tried to build a custom scroll for my website but it's not perfect and I don't know how to improve it. It should scroll from one position to another specific position but there is a difference of pixels that become bigger every scroll events. It also seems to not work on chrome.
here is a link to the html file :http://infographie.inraci.be/blc/blc.html
here is the code :
$(window).bind('mousewheel DOMMouseScroll', function(event){
var hauteur5 = $(window).height();
var scroll5 = $(window).scrollTop();
if (event.originalEvent.wheelDelta > 0 || event.originalEvent.detail < 0) {
$(window).scrollTo(scroll5-hauteur5/4,1,function(){
})
} else {
$(window).scrollTo(scroll5+hauteur5/4,1,function(){
})
}
});
If you want check this snippet: https://stackoverflow.com/a/38572744/3605379
There I check the week speed with a timeout. Play with it so you can get the timing right.
The script below displays a dotted line from the top of the screen to an up arrow which position depends on how far down the page the user has scrolled so that they can then click the arrow to scroll back to the top. This works great in Chrome but doesn't work at all in IE or Firefox, i.e. the dotted line does not grow nor does the arrow move down the page on scroll.
Does anyone know why this is?
HTML:
<div id="dotted-line">
<div id="up-arrow">^up</div>
</div>
JS:
$(window).scroll(function(){
if ($(window).scrollTop() > 10) {
var pos = $('body').scrollTop();
$('#dotted-line').css('height',pos/4);
$('#up-arrow').css('top',pos/4);
} else {
$('#dotted-line').css('height','6px');
$('#up-arrow').css('top','-150px');
}
});
P.S. I've tried doing a JSFiddle but I don't think you can scroll, therefore I cannot demonstrate this.
Chrome scrolls with body, IE/Firefox scroll with html. Personally I think html makes more sense, but that's just like my opinion, man.
Use 'html,body' as a selector when attempting to do stuff with scroll - that includes in your $(...).scrollTop() > 10 check.
To avoid re-evaluating the selector every time, consider wrapping the code:
(function(undefined) {
var container = $("html,body");
$.windowScrollTop = function(newval) {
if( newval === undefined) {
return container.scrollTop();
}
else {
return container.scrollTop(newval);
}
}
})();
// call $.windowScrollTop() to get position
// call $.windowScrollTop(100) to set position to 100
Note that I'm not sure how necessary the "check for undefined and call separately" bit is needed. I'm not sure how jQuery would react to being literally passed undefined as an argument, so I'm playing it safe.
I can't handle such a mind-breaker:
It's common approach to hide page scroll when a tall popup shows. But when you set overflow: hidden to html and body elements, the content automatically returns to it's top (scrollTop: 0). It's no problem to keep scrollTop position, and reset it on popup's disappearing. But if you use transparent mask, user will see unnecessary jump from current scroll position to the top. How to escape this?
In the current Chrome and Firefox, I can set overflow: hidden only to html element to reach what I want, but it's not working on mobile devices.
Maybe someone can propose a good cross-browser solution.
I don't think this should be happening. I would look at the popup code to see if it's the culprit sending the page to the top and using subpar css to position the popup element.
In any case, here's code that ought to counter the behavior you're encountering. Since I cannot reproduce the problem, I cannot test my proposed fix. I think you'll find though that your pop up will be scrolled away out of view.
function keepScroll(){
var x = $('body').scrollLeft() + $(document.documentElement).scrollLeft();
var y = $('body').scrollTop() + $(document.documentElement).scrollTop();
$('html').css({
'overflow':'hidden'
});
$('body').css({
'overflow':'hidden'
});
$(window).scrollTop(y).scrollLeft(x);
}
The sicky footer layout has html and body height equal to '100%'. And when you set overflow:hidden it crops all the content and returns it to the top position.
To avoid this, you should set html and body height to 'auto' if scroll exists (you should check it to keep sticky footer behavior)
function keepScroll(){
var scrollHeight = $('body')[0].scrollHeight > $('html')[0].scrollHeight ? $('body')[0].scrollHeight : $('html')[0].scrollHeight,
keepCSS = scrollHeight > $(window).height() ? {'overflow':'hidden','height':'auto'} : {'overflow':'hidden'};
$('html, body').css(keepCSS);
}
See the fiddle, for live demo
Edit 1
This solution is still not working on mobile (overflow: hidden doesn't disable scrolling on iPad, the position 'fixed' fix for body throw the content to the top), so the issue is open
Edit 2
Find a fix, for mobiles. Maybe it isn't so clean, but works.
var scrollKeeper = (function() {
var scrollHeight = $('body')[0].scrollHeight > $('html')[0].scrollHeight ? $('body')[0].scrollHeight : $('html')[0].scrollHeight,
keepCSS = scrollHeight > $(window).height() ? {'overflow':'hidden','height':'auto'} : {'overflow':'hidden'},
scrollTop = 0;
return {
keep : function() {
scrollTop = $(window).scrollTop();
$('body').css({'position': 'fixed', 'width':'100%', 'top': -scrollTop + 'px'});
$('html, body').css(keepCSS);
},
release : function() {
$('html, body').removeAttr('style').scrollTop(scrollTop);
}
}
})();
Tip: Of course in the real development you should use css classes to avoid removeAttr(style) etc.
Tested on iPhone and Ipad (iOS 8+).
The fiddle http://jsfiddle.net/m1eav032/5/
I need help finding jQuery js fixed left menu like this.
Fixed position scrolling should depends on browser header.
see the answer in link
I prepared a demo in the answer might it help you
Main thing you need is jQuery
$(function(){ // this is the shorthand for document.ready
$(document).scroll(function(){ // this is the scroll event for the document
scrolltop = $(document).scrollTop(); // by this we get the value of the scrolltop ie how much scroll has been don by user
if(parseInt(scrolltop) >= 80) // check if the scroll value is equal to the top of navigation
{
$("#navbar").css({"position":"fixed","top":"0"}); // is yes then make the position fixed to top 0
}
else
{
$("#navbar").css({"position":"absolute","top":"80px"}); // if no then make the position to absolute and set it to 80
}
})
});