We Keep Coding

jquery ".animate({scrollTop:" with variable for "offset().top-xx" value

I have a fixed div set at the top of the browser window, with z-index:2, and with text in this div.
My website page is a single page at z-index:1, and with multiple "<section id=...>" sections in it for each website "page".
I'm using javascript and jquery to display each section id for the user, and for the requested section to come up flush with the bottom of the top fixed div.
For this, I am using the statement:
$('html, body').animate({scrollTop: $('#sectionid').offset().top-xx)}, 0);
- where "xx" above is a number.
I can manually edit and change the "xx" number in my program to set the page section to whatever top I need, and this all works fine.
However, I am also using; "$(window).on('resize', function() { .." in my program, to reset/recalculate the section top to match the bottom of the fixed div. This is because the fixed div changes in height whenever the browser window is re-sized by the user. That is, the text in the fixed div will re-flow onto the next line when the browser window is made smaller etc..
So I tried using a variable name for the "top-xx" value, such as ".offset().top-myPageTop". But this does not work and the sectionid top always lands on "top-0" under the fixed div.
After much trial & error, I came up with this solution:
$('html, body').animate({scrollTop: eval('$('#sectionid').offset().top-' + myPageTop)}, 0);
- where "myPageTop" is a variable that is set/reset by the "$(window).on('resize'.." function mentioned above.
For my website, the above last jquery statement works just fine. But I am left wondering that maybe this is not really the correct way of doing this. I have looked through the jquery documentation and searched this site (and others), but I could not find much on using "top-xx" with a variable name in the above statement. Is there a better way of doing this?

jQuery toggle class gets called too often on scroll

I am trying to add a class to my sticky container once the user scrolls the page past 100px, but it is lagging, and toggling the class uncontrollable.
$(function () {
$nav = $(".topmenu-container");
$(document).scroll(function () {
if ($(this).scrollTop() >= 100) {
$nav.addClass('scrolled');
} else {
$nav.removeClass('scrolled');
}
});
});
This is what I have so far.. I had the same function without an if clause and the toggleClass function instead, but same effect there.
Here you see the container that sticks to the top on scroll, and that I want to add the class to once the user scrolls past 100px from top for example
Edit: I now output the scrollTop value and saw, that it seems to get stuck at the point where the toggle should happen. It keeps jumping between 156px and 87px which makes the toggle happen multiple times a second. Does anyone have an idea?

What you need is rate limiting for your scroll events. In your case, I would suggest throttling, which means that your scroll events are limited to a certain number per second or time unit.
Another option is to use debouncing, but this would cause the event to be triggered only once at the end of the scrolling, which might not be the best solution for your case.
Read more here: Difference Between throttling and debouncing a function
Nice visualization: http://demo.nimius.net/debounce_throttle/

Depending on your use case you may actually get away with the new sticky value for the position property in CSS:
https://developer.mozilla.org/en-US/docs/Web/CSS/position
Additionally, instead of using debouncing and throttling, you could consider using the IntersectionObserver API. The events for InteresectionObserver fire only once (depending on settings) and surely less than scroll which is a hard to optimize event since it fires all of the time. See here:
https://developer.mozilla.org/en-US/docs/Web/API/Intersection_Observer_API
Now, if you have some elements inside the element that depend on the class, such as... the logo having a scaling animation or such, you will definitely have to use IntersectionObserver. It looks like your threshold is 100 pixels, you can definitely configure Interesction Observer to do that.
You can also take a look at this example from Wes Bos which seems to be in one of his free classes:
https://wesbos.com/javascript/06-serious-practice-exercises/scroll-events-and-intersection-observer
I'm hoping you can try these solutions instead of the antiquated scroll thing.

jQuery scrolling out of view issue

I am working on building a schedule. So far it's pretty straight-forward. There is one bit of functionality I am having issues with.
I have an ul that has a fixed height to allow scrolling. There are "Labels" (li.dayLabel) withing the ul that separate the hours. What I am trying to do is to have it so that when a label is scrolled out of view it will change the text in the placeholder to it's text. Then once that works, I need it to work in reverse. So when they label scrolls back into view it updates the placeholder. Basically, I am trying to make the placeholder be a title for the available items until another label is then scrolled out of view. This is for scrolling from the top. So as you scroll down the list the placeholder is meant to be a title for the section you are viewing until you reach another section and it takes its place. Then when you scroll back down I need it to replace the text with the previous li.dayLabel so the sections stay organized. I hope this makes sense.
You can see what I am trying to do by looking at the original that I am basing this off of. Notice how the placeholder changes as you scroll down the list and changes back when you scroll back up.
Demo: jsFiddle // Note: line 54 is the part that is in question
I originally used:
$(".snlf-schedule-list li.dayLabel:visible:first").text();
as the :first selector is suppose to only match a single element.
I later tried:
$(".snlf-schedule-list li.dayLabel:visible").filter(":eq(0)")
as this is suppose to be the same thing.
It seems that when an element is out of view it still is considered :visible I believe this is my issue.
Am I doing this completely wrong? I was under the impression that when you scroll an element like this it should no longer be :visible. After reading the documentation I have learned that this is not the correct selector to use.
It would appear that scrollTop is how I should be doing this. Now I have used scrollTop for scrolling down pages to disable animations when not in view but I am not clear on how to untilize this for a ul with scrollbars.
I tried:
var _first = $('li.dayLabel:first'); // next element to scroll out of view?
if( $(this).scrollTop() > (_first.offset().top+_first.height())) {
// Out of view
console.log("out");
} else {
// in view
console.log("in");
}
Updated Demo: jsFiddle
But it seems to be redundant as it's already calculating the first element so I am not sure how to get the correct element (the next one that's about to scroll out of view.) Then I need this to work when they scroll back up...
Any insight on this is much appreciated. Hopefully it's something simple I am just over complicating or missing completely.
Thanks,
Jeremy

The solution for my case was:
// Set placeholder text on scroll
var _scrollCagePositionTop = $(".snlf-schedule-list").offset().top;
var _first = $('li.dayLabel:first'); // first dayLabel element
$(".snlf-schedule-list").scroll(function(){
var _lastOffText = $(_first).text();
$("li.dayLabel").each(function() {
if ($(this).offset().top < _scrollCagePositionTop) {
_lastOffText = $(this).text();
}
});
$("#schedule-placeholder").text(_lastOffText);
});
What I did was set the known position of the top of the scroll cage (_scrollCagePositionTop)
When the user scrolls I set a variable _lastOffText that keeps track of the last item text content when scrolled out of view (less offset top than the palceholder). I then set this value to the placeholder.
This method allows me to have the proper text in my placeholder when the user scrolls up or down.
To fix the issue of an empty placeholder when the user scrolls back to the top I just set the default of _lastOffText to be the text of the first label ($(_first).text())
Hope others find this useful.
Here is the working demo: jsFiddle Final

Want to scroll a DIV element, not entire webpage

Long story short, I need to figure out a quick way to scroll a div element from the JavaScript console in Google Chrome. Here is a picture of the element that I am trying to scroll:
http://i1250.photobucket.com/albums/hh527/dr4g1116/Capture_zps63402209.png
And here is the HTML where the DIV item is that I need to scroll (highlighted at the top):
http://i1250.photobucket.com/albums/hh527/dr4g1116/Capture1_zps04c66647.png
Here's what I've tried so far:
First:
<NestedList_trends_trends_variable_selector_variable_selector_variable.scrollTo>(0,250)
Next:
NestedList_trends_trends_variable_selector_variable_selector_variable.scrollTo(0,250)
Finally:
$('body').animate({ scrollTop: $('#NestedList_trends_trends_variable_selector_variable_selector_variable').offset().top}, 5000)
This last one just scrolled the entire page. Not sure why as I referred to the correct DIV ID.
I've tried tweaking any of these three methods, but to no avail. I've run out of ideas and nothing I find on the web has helped me. Anyone have any ideas on how I can scroll this element? Please let me know!
Thanks and cheers!!
UPDATE:
Tried this to no avail:
$('#NestedList_trends_trends_variable_selector_variable_selector_variable').animate({ scrollTop: $('#Button_86').offset().top}, 5000)

You are animating the body element. You need to animate the target div. Also, I would consider either shortening the ID on that element to make it more manageable or target the element using one of the classes. Either way, try using the code in that last snippet but put the nested list inside of the first selector and the child element to which you want to scroll in the scrollTop attribute's selector.

It looks like you have jQuery so this should do:
$("#NestedList_trends_trends_variable_selector_variable_selector_variable").scrollTop(250);
or to make my brain stop hurting:
//somewhere at top of file or in a bloody config somewhere
var bigAssIdDiv = $("#NestedList_trends_trends_variable_selector_variable_selector_variable");
...
///later
bigAssIdDiv.scrollTop(250);
Note that with scrollTop the number you provide is the number of pixels "hidden" above the top (similar to scrolling down by that number of pixels...)

How to improve JS scroll performance?

I'm working on revamping my website, and the new one can be found on http://beta.namanyayg.com/
There are mainly two things related to scroll on the site:
To check on which 'page' the user is on, by calculating the top offset and scroll position, then adding a class to the page.
To smooth scroll on menu click.
I've written code for both, but there is a lot of lag.
The first one almost always results in lagging. The second one, as a result, lags too. I have included a boolean to check if it's smooth scrolling and disabled the normal scroll events then, but there's not much change.
Do you have any advice on how to improve performance so there is no (or at least, less) lag? Thank you in advance! :)
...Or is it not related to JS at all? I've optimized everything else...
EDIT: Unminified JS at http://beta.namanyayg.com/js/main.js

If you are using underscore, it has an awesome _.debounce function that is excellent for this sort of thing.

To check how much the user has scrolled from the top of the page (i.e. on which 'page' he is at the moment) can be achieved with:
$(window).scroll(function () {
var scrollAmount = $(window).scrollTop(); // in pixels
if(scrollAmount > SOME_AMOUNT)
{
// add required css class
}
});
To scroll smoothly, to some id for example, you could use:
$("html, body").animate({ scrollTop: $("#someID").scrollTop() }, 1000);
These are both jQuery solutions, so you should have jquery library included. There is also a nice jQuery plugin called waypoints that performs these calculations. It might prove useful to you and it has some other nice features and examples.

I have the same problem. I have a scrollable div with thousands of smaller divs. Every time I call scrollTop to get the scroll-position or set it, it sometimes waits at least 1 second.
I read these slides: http://www.slideshare.net/nzakas/high-performance-javascript-2011 (especially slides 138-139) and now I realize that every call to scrollTop, even as a getter, makes javascript relayout the page. This is most likely the cause of delay, but unfortunately I have not found a solution yet, as in a way to call scrollTop without causing relayouts.
Note: I've only been testing on Chrome.
Also read 'Browsers are smart' section of this article: http://www.phpied.com/rendering-repaint-reflowrelayout-restyle/

I've found an easy solution to the lag with getting scrollTop, just call it inside a scroll-handler and save the result in a variable.
for example in jQuery:
var scrollPos = 0,
element = $('.class');
element.scroll(function(){
scrollPos = element.scrollTop();
});
For the second problem, setting the scrollTop, I reduced the amount of DOM elements by only showing the visible elements. In your case make sure only the visible page(s) are added to the DOM. when scrolling to the next page, in the scroll handler remove the top one (use jQuery .detach) and append the next one to the DOM.