The scroll function is executed only one time

Question

The scroll function is executed only one time

I'm currently working on implementing a sticky sidebar snippet using jQuery. However, I am facing an issue where the function within .scroll() is only executing once instead of on every scroll event. Can anyone help me identify what I might be doing incorrectly?

var sticky = $('#sticky');
var staticSticky = $(sticky).offset().top;

$(window).scroll(moveEl(sticky, staticSticky));

function moveEl(element, staticElToTop){
    if( $(window).scrollTop() >= staticElToTop ){
        $(element).css('top', $(window).scrollTop() + 'px');
    }
}

You can view my current attempt here: http://codepen.io/ExcellentSP/pen/GqZwVG

At this stage, the code provided is not fully operational. My primary objective is to resolve the scroll event functionality before moving forward with further development.

javascript jquery css

Answer 1

Answer №1

To ensure your moveEl method is properly executed when the window is scrolled, you should wrap its content within a function that is returned for the $(window).scroll() event like so:

var sticky = $('#sticky');
var staticSticky = $(sticky).offset().top;

$(window).scroll(moveEl(sticky, staticSticky));

function moveEl(element, staticElToTop) {
  return function() {
    if( $(window).scrollTop() >= staticElToTop ){
        $(element).css('top', $(window).scrollTop() + 'px');
    }
  }
}

Clarification: The key point here is that by simply calling a function without returning anything, it defaults to undefined, making it equivalent to $(window).scroll(undefined). This explains why the function only runs once initially.

However, by returning a function within the moveEl method, the .scroll() event now has a valid handler attached to it, transforming it into $(window).scroll(handler). Consequently, the function will now act as intended every time the window is scrolled.

Answer 2

To ensure your moveEl method is properly executed when the window is scrolled, you should wrap its content within a function that is returned for the $(window).scroll() event like so:

var sticky = $('#sticky');
var staticSticky = $(sticky).offset().top;

$(window).scroll(moveEl(sticky, staticSticky));

function moveEl(element, staticElToTop) {
  return function() {
    if( $(window).scrollTop() >= staticElToTop ){
        $(element).css('top', $(window).scrollTop() + 'px');
    }
  }
}

Clarification: The key point here is that by simply calling a function without returning anything, it defaults to undefined, making it equivalent to $(window).scroll(undefined). This explains why the function only runs once initially.

However, by returning a function within the moveEl method, the .scroll() event now has a valid handler attached to it, transforming it into $(window).scroll(handler). Consequently, the function will now act as intended every time the window is scrolled.

Answer 3

Answer №2

By calling $(window).scroll(moveEl(sticky, staticSticky));, you are telling JavaScript to run the function without passing its reference.

 $(window).scroll(function(){ 
   moveEl(sticky, staticSticky);
 });

Answer 4

By calling $(window).scroll(moveEl(sticky, staticSticky));, you are telling JavaScript to run the function without passing its reference.

 $(window).scroll(function(){ 
   moveEl(sticky, staticSticky);
 });

The scroll function is executed only one time

Answer №1

Answer №2

Similar questions

Implementing dual language codes for a single locale in internationalization (i18n) efforts

Ways to conceal a badge using JavaScript

Disappearance of external page upon refreshing - jquery mobile

The casperjs evaluate function isn't able to provide me with the necessary data I

Retrieving Information from API using Vue.js

Utilizing jQuery to select an attribute containing a special character

What is the best way to test an externally hosted application with Testacular and AngularJS?

css issue with focus on ie11

Is it possible to verify the authenticity of JSON data retrieved from

Mongoose/JS - Bypassing all then blocks and breaking out of the code

Issue with Setting Value in JQuery Select Box

Retrieve the URL for the React component

Tips for avoiding repeated Modal Popup instances and preventing the page from automatically scrolling to the last element when using ReactJS

Struggling with organizing my code in node.js - it's all over the place and not very reliable. How should I tackle this

Linking two socket.io clients together (Establishing a direct socket-to-socket connection that works across different browsers)

Dropdown box not displaying any choices

Node.js is indicating that the certificate has expired

Connect my Vue.js model data to the object that will be used for submission

Is there a way to implement retry functionality with a delay in RxJs without resorting to the outdated retryWhen method?

Why are my cursor and my drawing line on opposite sides?