Beginning point of horizontal scrolltop

Check out the link http://codepen.io/anon/pen/zGLZoR

I have a "floating div" that moves along with the page scroll, but I want it to start floating only after the user has scrolled down 200px. Currently, it starts moving as soon as the scrollbar is moved. How can I achieve this?

                $(window).scroll(function(){
                   $("#div").stop().animate({"marginTop": ($(window).scrollTop()) + "px", "marginLeft":($(window).scrollLeft()) + "px"}, "slow" );
                });

UPDATE:

It is important that the div returns to its original position when scrolling back up past the 200px mark at the top of the page.

javascriptjqueryhtmlcss

Answer №1

UPDATE: Give this a shot instead

let previousScrollPosition = 0;

$(window).scroll(function(){
    let currentScrollPosition = $(this).scrollTop();
    
    if (currentScrollPosition > previousScrollPosition){
        if($(window).scrollTop() > 200){
            $("#div").stop().animate({"marginTop": ($(window).scrollTop()) + "px", "marginLeft":($(window).scrollLeft()) + "px"}, "slow" );
        }
    } else {
        $("#div").stop().animate({"marginTop": ($(window).scrollTop()) + "px", "marginLeft":($(window).scrollLeft()) + "px"}, "slow" );
    }
    
    previousScrollPosition = currentScrollPosition;
});

This code will determine the direction of your scroll and adjust the scrolling behavior accordingly. When scrolling down, it will surpass 200px, but when scrolling up, it will behave normally :)

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

Guide on transmitting information from two separate pages to a PHP script simultaneously using an AJAX request

Looking to gather user information from a form and pass it onto another page smoothly. Origin Site <form action="destination.php" method="post"> Name: <input type="text" name="name"> Email: <input type="text" name="email"> <input typ ...

javascriptphpjqueryajax

jQuery AJAX issue: No headers or response displaying in console

I am currently working on updating a web application. The live version of the app can be accessed at . We are implementing changes within the district, and I am in the process of modifying the app to accommodate these updates. My work involves three diffe ...

jqueryajax

Is there a way to display multiple rows in the responsive view of Datatables.net?

Here is a screenshot of my table in desktop mode: https://i.sstatic.net/3Fe8C.png In responsive or mobile view, users can currently only see the country name without clicking on the + button. However, I want to display the (name, buy price, sell price) wi ...

jqueryhtml-tabledatatables

Finding a nested HTML element within a frame using Selenium without the presence of an iframe

Currently, I am delving into the world of Selenium using python to automate form filling on a particular website. However, my efforts have hit a roadblock as I am struggling to identify any elements within a frame and encountering a dreaded NoSuchElementEx ...

pythoncssseleniumframewebdriverwait

Several problems with CSS regarding DIV height set to 100% and the content inside

I'm facing a bit of a puzzle here. I have a div that spans the full height of the browser, with a background set to 100% size and image content contained in two inline divs that are vertically aligned in the middle. In one of these divs, the image is ...

htmlcss

Exploring the concept of nested arrays in Angular 2 using Typescript

I'm exploring the possibility of defining an array in Angular 2 that contains multiple other arrays within it. To clarify, here's what I had initially: export class PaymentDetails { account: any[]; bpNumber: number; } The issue with t ...

htmlarraysjsonangulartypescript

WordPress taxonomy.php Issue: not Displaying

I've successfully created a Custom Post Type and custom taxonomy. However, when I attempt to view any category, the page defaults to index.php instead of taxonomy.php. Even after trying taxonomy-portfolio-category.php, it still redirects to index.php. ...

phphtmlwordpresscustom-post-type

Hiding the form in PHP once it has been submitted

I've created a domain name availability check form that is contained within a specific container. Upon submission of the form, the script checks if the domain name is available and displays a message within the same container as the form. What I' ...

phphtmlmysqlforms

Avoiding infinite loops when encountering specific objects in JSON data

I am currently working on creating a table using JSON data fetched through an ajax response. The array of objects I receive looks like this: JSON Array of Objects [ { "ItemCount":2 }, { "ProductID":"4220068", "ProdMfg":"" ...

jqueryjsonajax

The selector-triggered JQuery event being invoked by my script

Facing an issue while trying to invoke my jQuery event. I am working with 2 jQuery events: $element.on('click', function (e) { ... }); $element.on('click', '.toggle', function (e) { ... }); My question is how can I trigge ...

javascriptjquery

Obtain the string value for the template variable

Trying to display a string literal if element.elementId is null or undefined. <div>{{String(element.elementId)}}</div> Encountering an error: TableBasicExample.html:6 ERROR TypeError: _co.String is not a function at Object.eval [as updat ...

javascriptangular

The webpage containing the authRequired meta briefly flashes on the screen, even if there are no active login sessions on Firebase

As a beginner in Vue and web development, I have been enjoying my journey so far but now I find myself stuck. Currently, I am working on creating an admin dashboard with Firebase authentication. Everything seems to be functioning as expected, except for on ...

javascriptfirebasevue.jsfirebase-authenticationvue-router

Retrieve the child property of an object directly without referencing the parent property

When using html2json, it returns an object with child objects. The challenge is to retrieve the value of the key "text", which can be located in different places depending on how many child objects there are. I have attempted the following code, but due t ...

javascriptnode.jsjsonobjectparent-child

This error is thrown when trying to access the property 'message' of an undefined value

I'm currently working on adding an AJAX contact form to my website. However, I've run into a problem where when I try to submit the form, I encounter the following error in Google Chrome: "Uncaught TypeError: Cannot read property 'message&a ...

javascripthtmlajaxgoogle-chrome

Trying to modify a read-only property in React Native, got the error message "Attempted to assign to

Reflecting on My Journey(feel free to skip ahead) Recently, I delved into the world of mobile development with react-native, and let me tell you, it was a rollercoaster. After spending hours troubleshooting why my react-native init project wouldn't e ...

javascriptreactjsreact-native

What steps can I take to replicate a 'heap limit Allocation failed' error?

Context I encountered a challenging issue where my program displayed a FATAL ERROR: Reached heap limit Allocation failed - JavaScript heap out of memory This occurred when the memory usage reached around 512 mb Scavenge (reduce) 507.8 (518.9) -> 507.2 ...

javascriptnode.jsherokuheap-memoryallocation

Retrieve the value with `eventArgs.get_value()` function to obtain the selected text instead of the ID

When I populate a textbox with autocomplete using the code below, it only returns the selected text and not the rowid. Any idea why alert(eventArgs.get_value()) doesn't return the actual ID of the row in SQL? <script language="javascript" type="te ...

javascriptasp.netsqlajax

jQuery fails to hide DIVs when jQuery.show() has been utilized in a previous event

I've always considered myself pretty proficient in jQuery, but this particular issue has me stumped. Essentially, I have a click event that should hide one DIV (a placeholder) and show two others (an input section and control buttons section). However ...

javascriptjquerycsshtml

What is the best way to create a line break in a React caption without it being visible to the user?

Is there a way to add a break or invisible character between "we make it simple" and "to create software" in order to match the Figma design for the React web app caption? https://i.stack.imgur.com/Z4rpt.png https://i.stack.imgur.com/06mMO.jpg https://i.s ...

htmlcss

The issue arises when using an Angular directive with an input type set as "number"

When the input type is text, the code below works perfectly fine. However, it fails to function when the input type is changed to number. <div ng-app="myApp" ng-controller="myCtrl as model"> <input type="text" ng-model="cero" ng-decimal > ...

javascriptangularjsvalidationangularjs-directive