Scrolling the DIV element on a jQuery on-page scroll event

$(document).ready(function () {

$(function () {
    var offset = $(".control.Home .rightCol").offset();
    var topPadding = 15;
    $(window).scroll(function () {
        if ($(window).scrollTop() > offset.top) {
            $(".control.Home .rightCol").stop().animate({
                marginTop: $(window).scrollTop() - offset.top + topPadding
            });
        } else {
            $(".control.Home .rightCol").stop().animate({
                marginTop: 0
            });
        };
    });
});
});

I am currently experiencing an issue where the right hand side div on my localhost website keeps scrolling down as I scroll through the page. How can I make the div stop at a certain point aligned with the left hand side div's position?

Website:

I have added a link to the website so you can see the div scrolling behavior. I need it to stop before reaching the footer area where the scrolling icons are located.

jquerycssscroll

Answer №1

I implemented this code on one of my websites:

var scroll = 0;
var marginTop = 10;
$(document).ready(function(){  
    $(window).scroll(function () {
        marginTop = ($(document).scrollTop() - scroll) + marginTop;
        scroll = $(document).scrollTop();

        $("#left").animate({"marginTop": marginTop+"px"}, {duration:500,queue:false} );
    });  
});

The #left element moves up and down based on the user's scrolling.

You can view it in action here: realtimecoding.net

Edit: To limit the scrolling to a maximum of 660px, you can include a simple check like this:

var scroll = 0;
var marginTop = 10;
$(document).ready(function(){  
    $(window).scroll(function () {
        marginTop = ($(document).scrollTop() - scroll) + marginTop;
        scroll = $(document).scrollTop();

        if (marginTop<660) {
            $("#left").animate({"marginTop": marginTop+"px"}, {duration:500,queue:false} );
        }
    });  
});

This ensures that the margin top does not exceed 660px.

Similar questions

If you have not found the answer to your question or you are interested in this topic, then look at other similar questions below or use the search

What is the best way to trigger an event from a menu item within a view and then capture it in the controller in Ext

I'm currently facing a challenge in ExtJS where I need to trigger an event from a view upon clicking a menu item and then catch that event in the controller. Here's the approach I took, but unfortunately, it's not functioning as expected. W ...

javascriptjqueryextjsextjs-mvc

Ensure that buttons are cropped when extending beyond the border of another DIV

My issue involves a main DIV with buttons contained within it. I am seeking a solution to ensure that the buttons are cut off at the edge of the DIV, similar to the concept illustrated in this image. In the image, the blue represents the body, the light gr ...

htmlcssz-indexbehind

Move the DIV element to a static section within the DOM

In my Vue app, I have implemented methods to dynamically move a DIV called 'toolbox' to different sections of the DOM. Currently, the DIV is positioned on the bottom right of the screen and remains static even when scrolling. My goal is to use t ...

javascriptcssvue.jspositioncss-position

How can I toggle the radio button based on the dropdown selection?

I'm attempting to enable or disable a radio button based on the selection from a dropdown menu. View my jsfiddle example here For example, if the user selects "persons" from the dropdown, only the options for Anthony and Paul should be available to ...

javascripthtmljquery

Automatically adjust sizes with div elements

How can I automatically resize this iframe within a div? My current method is not effective. <iframe src="http://www.gamepuma.com/external.html?http://data.gamepuma.com/games/06/crash-bandicoot.swf" width="600" height="400" frameborder="0" margin ...

csshtml

The interface IJobDetails cannot be assigned to type null

https://i.sstatic.net/cVVSs.png In the code snippet below, I have created an interface called ClientState1. Now, I am attempting to define a constant named descriptionJobDetails with the type ClientState1, specifically for IJobDetails. However, I am encou ...

c#jqueryangulartypescriptinterface

Conceal the Form Upon Submission

I'm currently working on a project where I want to hide my form after the submit button is pressed using Jquery. Firstly, I have included the Jquery library in my code. <script type="text/javascript" src="http://ajax.googleapis.com/ajax/libs/jque ...

javascriptjqueryhtmlcssforms

AngularJS is unable to properly show the full calendar on the screen

Currently working with fullcalender.js in conjunction with AngularJS. Encountering an issue where the calendar is not displaying without any error indication, making it difficult to identify the missing component. This marks my initial attempt at combinin ...

jqueryangularjs

Submitting forms using Ajax

Utilizing AJAX to submit an HTML input form and redirecting the output page upon completion has presented me with some unexpected results. I have explored two different approaches, but for some reason, they yield different outcomes. The HTML form structur ...

ajaxformsjquery

Implementing mouse hover functionality for fieldset in EXTJS

I am looking to enhance the following code snippet by adding a mouse hover event that changes the background color of the fieldset item and displays an image next to it. Can someone assist me with this modification? var mainGroup = { ...

javascriptcssextjsmouseover

Is this the correct method for constructing a class in CSS?

What is the correct way to style a class with CSS and write HTML code? .first{ color:red; } Here is an example of HTML code: <class id=first> <p> some text </p> <p> some other text </p> ...

htmlcss

Incorporating jQuery functions in the Angular app's main component file, app

I've been working on an Angular application and recently added the jQuery package with the following code: $ npm install jquery --save Now, I am attempting to transfer data from my HTML web page's .js file to the app.component.ts in Angular. I ...

javascriptjqueryhtmlangularangular9

How can I include a close/ok button at the bottom of a bootstrap multiselect component?

Currently, I am utilizing the Bootstrap multiselect tool to filter query outcomes on a specific page. After selecting one or multiple options, my goal is to have a "close" or "OK" button visible at the bottom of the selection list. Upon clicking this butto ...

jquerycsstwitter-bootstrap-3bootstrap-multiselect

Bootstrap 4's column ordering feature is malfunctioning

<div class="container"> <div class="row"> <div class="col-lg-8 col-md-12 order-2">1 </div> <div class="col-lg-4 col-md-12 order-1">2 </div> </div> </div> I need to change the orderi ...

htmlcssbootstrap-4

Accessing PHP variables in JavaScript

Hi there, I am new to all this. I am trying to figure out how to use a PHP variable in JavaScript. Here is a snippet of my code (popup.php): <?php $id_user = $this->session->userdata('id'); ?> <script type="text/javascript"> ...

phpjavascriptjquery

JQuery draggable and JavaScript functionality become disabled following an AJAX request

I have a click event declared as follows: $('body').on('click', 'input#searchVariables', function () { var datasetId = $('.TSDatasetID').val(); var term = $('#searchTextbox').val(); ...

javascriptjqueryajaxjquery-ui

Hide the form using jQuery specifically when the login submit button is selected, not just any random button

One issue I am facing is that when a form is submitted correctly, it hides the form. However, I have added a cancel button to close the pop-up thickbox window, but instead of closing the window, it also hides the form. How can I ensure that hitting cancel ...

jqueryhtmlajaxforms

CSS only accordion divs that are all opened by default with no need for jquery

My current setup involves: jsfiddle.net/wromLbq5 I would like to enable the functionality of having multiple accordion sections open simultaneously upon page load. This means that when one section is opened, the others should not close. Is there a way to ...

htmlcssaccordion

Centering text both vertically and horizontally over an image using CSS

I've been attempting to center the div banner_title both vertically and horizontally within another div in this way... .box { text-align: center; } .banner_title { font-size: 32px; position: absolute; top: 50%; width: 100%; } .banner_titl ...

htmlcss

Using Jquery to update the information displayed in a div class to show more details about the clicked video

I am currently developing a video playlist similar to YouTube for my hybrid app. I am fetching and displaying the data using functions from json data provided by the web server. Below is a sample of the json data: [{"video_id":"1","video_youtube_title":" ...

javascriptjqueryhtmlyoutube