I am having a weird kind of issue in Firefox.
I have applied some js to the header of this site http://devignstudios.nl/ so the header is alway sticky when user scroll down the page.
The sticky header works fine in all browsers except firefox.
I tried to find the solution but couldn't find a proper answer.
Following is the js
var stickyNavTop = $('#header').offset().top;
var stickyNav = function(){
var scrollTop = $(window).scrollTop();
if (scrollTop > stickyNavTop) {
$('#header').addClass('sticky');
} else {
$('#header').removeClass('sticky');
}
};
stickyNav();
$(window).scroll(function() {
stickyNav();
});
Any help here will be highly appreciated.
Thanks in advance!
It has something to do with the scrollTop function which doesn't work in all cases on firefox when applied to id and classes.
Try this: http://jsfiddle.net/rHmAA/7/
This is the modified version of your sticky div thing. (for future reference)
The script uses a #stickyheader as a wrapper.
$(document).ready(function () {
$('a[href^="#"]').bind('click.smoothscroll', function (e) {
e.preventDefault();
var target = this.hash,
$target = $(target);
var offset;
if ($('#stickyheader').css('position') == 'relative') {
offset = $('#stickyheader').outerHeight(true) * 2;
} else {
offset = $('#stickyheader').outerHeight(true);
}
console.log("offset: " + offset);
var $parent = $target.offsetParent();
console.log("$target.offset().top " + $target.offset().top);
$('#wrapper').animate({
'scrollTop': $target.offset().top - offset
}, 1500, function(){
window.location.hash = target;
});
});
});
Related
I got an issue, where I have an dynamic header that gets bigger when scrolling up and smaller when scrolling down and therefore needs to change scrollTop offsets.
So i've been looking around and tried with my no existent java skills with no success.
This jquery code:
$(document).on('click', 'a[href^="#"]', function(e) {
var id = $(this).attr('href');
var $id = $(id);
if ($id.length === 0) {
return;
}
e.preventDefault();
// top position relative to the document
var pos = $(id).offset().top-500; // move this one
$('body, html').animate({scrollTop: pos});
});
var iScrollPos = 0;
$(window).scroll(function () {
var iCurScrollPos = $(this).scrollTop();
if (iCurScrollPos > iScrollPos) {
var pos = $(id).offset().top-500; //here when scrolling down
} else {
var pos = $(id).offset().top-100; // Here when scrolling up
}
iScrollPos = iCurScrollPos;
});
I made a JS fiddle to show what I'm trying to achieve: https://jsfiddle.net/zq9y7nge/1/
So, Is it possible to change offset depending on scrolling up and down?
I'm trying to figure out how to repeatedly clone the contents of a div on scroll, thus giving the impression that the page goes on forever and ever. My markup thus far is as follows and a fiddle here too https://jsfiddle.net/guht49La/:
var inserated = false
$(window).scroll(function() {
var scroll = $(window).scrollTop();
if (scroll >= 800 && inserated == false) {
var $button = $('.hd').clone();
($button).insertBefore('.ap');
inserated = true;
} else {
}
});
Although this only inserts it once, as I want to keep inserting it every 800px (for example) thus giving the impression that the page goes on forever and ever. Any suggestions on this would be greatly appreciated!
This will work
var inserated = false
$(window).scroll(function() {
var scroll = $(window).scrollTop();
if (scroll >= 800) {
var $button = $('.hd').clone();
($button).insertBefore('.ap');
inserated = true;
} else {
}
});
This is a complete guess, but perhaps give this a go:
var nextInsert = 800;
$(window).scroll(function() {
var scroll = $(window).scrollTop();
if (scroll >= nextInsert) {
var $button = $('.hd').clone();
($button).insertBefore('.ap');
nextInsert += 800;
} else {
}
});
It is working, but it clones the div just once because you changed the inserated variable to true after inserting the first clone. It will work indefinitely if you delete it:
var inserated = false
$(window).scroll(function() {
var scroll = $(window).scrollTop();
if (scroll >= 800 && inserated == false) {
var $button = $('.hd').clone();
($button).insertBefore('.ap');
// inserated = true;
} else {
}
});
Notice that inserated = true; is commented out.
That code, however, can (and almost certainly) creates a huge amount of clones, so I'd suggest controlling the scrolling insertion point using something along the lines of Nat Karmios answer
My suggestion is similar to jbmartinez answer, except I would drop the inserated variable altogether and use classes to determine elements to be cloned:
$(window).scroll(function() {
var scroll = $(window).scrollTop();
if (scroll >= 800) {
var $button = $('.hd').not(".cloned").clone();
$button.addClass("cloned");
($button).insertBefore('.ap');
} else {
}
});
Would still need to adjust the scrolling mark as noted above tho.
Have created a sticky menu, which is working fine for desktop and mobiles.
But there is a small issue with mobiles, when ever scrolling the page and the finger is still on the screen then
after reaching to the position of the container where the menu needs to stick it is not happening.
When I removed the finger from the screen, then it is taking a second time and the menu is getting fixed.
is there any solution for this, kindly help me with a sample demo.
Demo
JS:
var menuSection = $('.section') , navLists = $('.menu ul li'),
navLists_height = navLists.outerHeight(), headerOffset = $('.top_layer').offset().top;
$(window).on('scroll', function () {
var window_top = $(window).scrollTop() + 12;
if (window_top > headerOffset) {
$('.menu').addClass('fixed');
} else {
$('.menu').removeClass('fixed');
}
var cur_position = $(this).scrollTop()+70;
menuSection.each(function() {
var top = $(this).offset().top - navLists_height,
bottom = top + $(this).outerHeight();
if (cur_position >= top && cur_position <= bottom) {
navLists.find('a').removeClass('active');
menuSection.removeClass('active');
$(this).addClass('active');
navLists.find('a[href="#'+$(this).attr('id')+'"]').addClass('active');
}
});
});
navLists.find('a').on('click', function () {
var $el = $(this)
, id = $el.attr('href');
$('html, body').animate({
scrollTop: $(id).offset().top - navLists_height
}, 500);
return false;
});
I loaded this jQuery-snippet for sliding a page via anchorLinks.
http://www.position-absolute.com/articles/better-html-anchor-a-jquery-script-to-slide-the-scrollbar/
In my case I have a fixed block (position:fixed) on the top of the page. Due to that I need a delta value for sliding down. If I don't use such a delta value the page is sliding to deep so that my anchorLink is hidden by the fixed block.
Has anybody an idea how to fix this issue?
Thx
The original Plugin:
jQuery.fn.anchorAnimate = function(settings) {
settings = jQuery.extend({
speed : 1100
}, settings);
return this.each(function(){
var caller = this
$(caller).click(function (event) {
event.preventDefault()
var locationHref = window.location.href
var elementClick = $(caller).attr("href")
var destination = $(elementClick).offset().top;
$("html:not(:animated),body:not(:animated)").animate({ scrollTop: destination}, settings.speed, function() {
window.location.hash = elementClick
});
return false;
})
})
}
Modified:
jQuery.fn.anchorAnimate = function(settings) {
settings = jQuery.extend({
speed : 1100,
offset: 0
}, settings);
return this.each(function(){
var caller = this
$(caller).click(function (event) {
event.preventDefault()
var locationHref = window.location.href
var elementClick = $(caller).attr("href")
var destination = $(elementClick).offset().top;
$("html:not(:animated),body:not(:animated)").animate({ scrollTop: destination+settings.offset}, settings.speed, function() {
window.location.hash = elementClick
});
return false;
})
})
}
Note that I've just added an offset option. So if your fixed div has a height of 60px then just call it with $('#whatever').anchorAnimate({offset: 60});
There must be a solution by editing this line:
window.location.hash = elementClick
Changing the duration value helps to slide to right position. But then the window "jumps" the offset-value at the end of the sliding.
Solution: I fixed the problem by removing line:
window.location.hash = elementClick
Thank you for giving me the opportunity to be helped.
I would like to create a toggle footer (slide pannel).
I found the code below which works fine but I want to be able to close the footer with two different buttons: the same image I used to open (#footer_button) AND another image (a cross) placed inside the content (#footer_content).
How should I proceed to integrate the same function on this image (#footer_button_2) with this code?
Many thanks in advance!
Here is a printscreen: http://hpics.li/cb5b88a.
Here is the code I use:
<script type="text/javascript">
jQuery(function($) {
var slide = false;
var height = $('#footer_content').height();
$('#footer_button').click(function() {
var docHeight = $(document).height();
var windowHeight = $(window).height();
var scrollPos = docHeight - windowHeight + height;
$('#footer_content').animate({ height: "toggle"}, 1000);
if(slide == false) {
if($.browser.opera) { //Fix opera double scroll bug by targeting only HTML.
$('html').animate({scrollTop: scrollPos+'px'}, 1000);
} else {
$('html, body').animate({scrollTop: scrollPos+'px'}, 1000);
}
slide = true;
} else {
slide = false;
}
});
});
</script>
You can separate them with comas like in CSS: $('#footer_button, #CrossImgID') :)
<script type="text/javascript">
jQuery(function($) {
var slide = false;
var height = $('#footer_content').height();
$('#footer_button, #CrossImgID').click(function() {
var docHeight = $(document).height();
var windowHeight = $(window).height();
var scrollPos = docHeight - windowHeight + height;
$('#footer_content').animate({ height: "toggle"}, 1000);
if(slide == false) {
if($.browser.opera) { //Fix opera double scroll bug by targeting only HTML.
$('html').animate({scrollTop: scrollPos+'px'}, 1000);
} else {
$('html, body').animate({scrollTop: scrollPos+'px'}, 1000);
}
slide = true;
} else {
slide = false;
}
});
});
</script>