Chri.s Chri.s - 1 year ago 64
jQuery Question

Jquery - var not being updated on resize, but being saved multiple times

I have created this piece of jquery-script with the purpose of enabling/disabling a div having position:fixed based on how far the user has scrolled (it's basically a combination of scripts that others have made, which i have adopted - so credit to them). It is working intentionally at first, but upon resizing the window, it breaks. I've come to the conclusion that the error lies in the old variables not being updated correctly upon resizing, even though I've tried to do so. I've searched quite a lot for an answer, but haven't been able to.

I have made some console.log's to find the error, and what i found is that:
When I load the page it works fine - however, when i resize the window, the function "indholdScroll" gets kind of duplicated when scrolling. When scrolling, the variable "containerOffsetTop" is called 2 times (2 calls if resized 1 time, and gets called even more times if you have resized more times). In the first call the variable has the initial value (from page load) and in the second call, it has the value of the new size, based on the window-resize.

So, the problem is that:

  1. The old values of the variable isn't replaced (specifically of the variable "containerOffsetTop", which is causing me the trouble)

  2. The function/variable "indholdScroll" is called multiple times, based on how many times the window has been resized.

I've really tried to find a solution for this, but without any luck. Therefore i'm asking you guys, if you could help me.

This is my script (jsfiddle if someone wants to "play" with it, and the code it self):

jQuery(window).on("load", function() {
if ((window.location.href.indexOf("katalog") === -1) && (window.location.href.indexOf("detail") > -1)) {
var indholdScroll;
indholdScroll = function() {
var plHeight = jQuery("#PL-container").innerHeight();
if (window.innerWidth > 560 && jQuery(window).innerHeight() > 590) {
jQuery(".indhold-container").css("height", plHeight);
} else {
jQuery(".indhold-container").css("height", "auto");
var windw = this;
var indholdDivHeight = jQuery(".indhold-inner").outerHeight(true);
var indholdTop = parseInt(jQuery(".indhold-inner").css('top'), 10);
var mainPadding = parseInt(jQuery("#main").css("paddingTop"), 10);
var entryHeaderHeight = jQuery(".entry-header").outerHeight(true);
var indholdHeight = jQuery(".entry-footer").offset().top - indholdTop - indholdDivHeight;
var thresholdCrossed = false;
var thresholdCrossedTop = false;

var containerOffsetTop = jQuery("#PL-container").offset().top;

jQuery.fn.followTo = function(pos) {
var $this = this,
$window = jQuery(windw);

jQuery(window).scroll(function(e) {
var scroll = jQuery(window).scrollTop();

//console.log for testing purpose
console.log("scroll: " + scroll);
console.log("scroll containeroffsetTop: " + containerOffsetTop);
console.log(scroll >= containerOffsetTop);

jQuery(function() {
if (!thresholdCrossedTop && scroll >= containerOffsetTop) {
} else if (!thresholdCrossed && scroll >= pos) {
} else if (thresholdCrossed && scroll <= pos) {
} else if (thresholdCrossedTop && scroll <= containerOffsetTop) {
thresholdCrossed = scroll > pos;
thresholdCrossedTop = scroll > containerOffsetTop;


var timeOutResize;
jQuery(window).resize(function() {
timeOutResize = setTimeout(function() {
}, 500);

I have updated the fiddle to include HTML - the link over the code is now correct. Do note that i had to change the script a bit, to make it work at jsfiddle - as an example from "$(window).scroll" to "$("#page").scroll".

Note that the "div" in question is ".indhold-inner" and can be found out at the right of the page with a slight grey background and the text saying "spring til overskrift".


Solution so far:
As @skobaljic answered, I had included
definition and call of the function, inside the function
function which are called upon resize to update the variables. However, separating the functions required that i made the variables global (i think?) which i'm not sure is the best solution? The updated script (and solution so far) can be found here, and seems to be working as intended:

Answer Source

You are calling jQuery('.indhold-inner').followTo(indholdHeight); inside the indholdScroll function, which each time sets new jQuery(window).scroll event. Also, jQuery.fn.followTo should be defined outside of indholdScroll function.

Recommended from our users: Dynamic Network Monitoring from WhatsUp Gold from IPSwitch. Free Download