Databases
StackOverflow2013
Postsdbo
POConvert css position to jquery smooth sliding
Body
 

Note that there are some explanatory texts on larger screens.

plurals
  1. POConvert css position to jquery smooth sliding
    text
    copied!<p>I currently have a <code>&lt;div&gt;</code> that maintains its position at the top of the left had side of the page, when the page moves up or down. This works fine but isn't very smooth.</p> <p>I'm looking to re-factor the code below to make this a smooth scroll. Currently when the trigger happens it just sets the CSS <code>top</code> property - which makes it "jittery". I'm a little unsure how to make this a smooth scroll motion opposed to setting the css top value to its exact location</p> <pre><code> //scrolling menu if($("#selectedOptions").length &gt; 0){ //if the element exists $(window).scroll(function(){ var div = $("#selectedOptions"); // the div that slides if(div) { var pos = div.parent().position().top; //position of the top of the wrapper var windowPos = $(window).scrollTop(); //current window postion //top of moving div not to go further than var bottom = $("#sizeAndQuantHeader").position().top; //where the div shouldn't go past //de-bug //console.log("pos: " + pos + " - winpos" + windowPos + ", heih: " + divHieght + " doc he: " + $(document).height() + " bott" + bottom); //if between the range then display at new postion if (windowPos &gt; pos &amp;&amp; (windowPos &lt; bottom)) { div.css("top", windowPos-pos); //must be higher than its current position so set to 0 } else if (windowPos &lt; pos &amp;&amp; windowPos &lt; bottom) { div.css("top", 0); } } }); } </code></pre> <p>Any help or tips on how to make a <code>&lt;div&gt;</code> scroll smoothly down a page would be much appreciated.</p> <p>**Update</p> <p>Unfortunately, i have elements that already scroll around different page areas:</p> <pre><code>var _scrollTo = function(div){ $('html,body').animate({ scrollTop: div.offset().top}, 'slow'); }; </code></pre> <p>Now when the function above is called i think it triggers the call:</p> <pre><code> $(window).scroll(function(){animate div... </code></pre> <p>and delays the scrolling of the newly animated div. I cant't use call back either as it's re-used else where. I may be missing something here so i've resorted back to no animation. </p>
 

Querying!

 
Guidance
An individual column

Larger individual text columns get their own page to allow for proper reading.

SQuiL has stopped working due to an internal error.

If you are curious you may find further information in the browser console, which is accessible through the devtools (F12).

Reload