I have a couple of sections, each containing a few sub-sections. Something like this:
Section A
Subsection 1
Subsection 2
Subsection 3
Section B
Subsection 1
Subsection 2
Subsection 3
...
When the user scrolls the bottom of the last sub-section into the viewport that sub-section should stop scrolling.
Then while the user scrolls further the next section should scroll in above it and overlap it.
I'd like the overlapping section to scroll like normal, with the exception that it goes above the previous one.
I hope this awesome gif can explain it a little better than words can...
I've been looking at solving this with jQuery and checking how far the document has been scrolled and trying to apply position fixed at the right time and position. But haven't been able to get the effect I'm after. I'll have to admit that my jQuery skills isn't the best and that I'm stuck.
Does anyone have a pointer in the right direction for me on how to solve this?
I hate leaving unanswered questions on StackOverflow, that's why I'm answering a question 3 years after. If you want to run a function when the user sees something when he scrolls, there is a jQuery plugin called NoobScroll (just google it or go on this link) Then, you should checkout the scrollOn() function, or the scrollProgress() function on the documentation (wiki on GitHub) to trigger an animation, and I hope you'll solve your problem
Related
I've read many posts about this, but never found something satisfying and I wonder if perhaps new techniques have been developed since those posts.
Basically, I have a fixed navigation header on my site, and a search bar that will get nested and fixed just under it as users start scrolling down.
Most of my anchor/section links are located on different pages than where the user is getting re-directed to when clicking them (so, no "smooth scroll" is happening).
I cannot add padding or a class manually to each of these points because most of them are generated automatically...
Is there perhaps some jquery I could apply that would automatically show these anchor/sections point lower in the screen?
Help :)
Working on my personal website, I am trying to implement the Intersection Observer API for navigation items active state management, such as the example we see here : http://intersection-scrollspy.surge.sh/
The problem is that, contrary to the demo where each section is equally tall / or is at least 100vh tall, I have sections that vary in size. In fact, the two last sections on my page are not tall enough when you zoom out the page, which screws the Observer mechanism... (Basically my last two sections are never "observed" and so the active states are never triggered for last two items of the navigation menu). This is problematic for higher resolution screens (or when a user just decides to zoom out the content) ...
I've tried to find a solution to that problem, but I am literraly stuck ... However I know that a solution must exist because this example website (https://prorez.caliberthemes.com/resume/) found a solution which works no matter what the zoom on the page is (it does not use the intersection observer though, if I am not mistaken) ...
Do you have any idea how I could solve that issue?
Thanks a lot
I have implemented an on-scroll loading which fetches some chunk of data every time the scroll reaches the end of the viewing area. After some point of time when there would be no more new data to be shown, how should I convey to this to the end-user from a UX point of view?
I was thinking of few options such as displaying a tooltip which automatically vanishes after few seconds. Other option would be something similar to rubber banding scrolling from Apple. Any other approach that can be used here?
Without knowledge of what the use-case is (i.e. has user performed a search or just scrolling a list from elsewhere), in general, two good options:
Follow Slack's "You are upto date! + icon" little image on the last
elastic scroll at bottom. Or, for example, "That's all we've got just
yet! Check your email for more or Search for [term] instead".
Use a progress-bar type of indicator like when you read an article on
Medium --> as people scroll down, they'll have a live indicator of
getting to the bottom of the list.
I don't like dead ends in my applications. If the user hits the bottom of your list and is still searching, he probably has the wrong search terms. I'd place a box along the line of "Haven't found what you're looking for? Try a different search term" and link that to the search box.
Even if it's not a search, once the user hits the bottom without successfully finding what they where looking for provide them with an alternative.
Hope this helps you.
Right now I'm just using dumb sleep statements, but there has GOT to be a better way to make things work than what I'm doing, right? I've tried visible and until_present but so far neither of them have the desired effect.
The element in particular is a table column header that, when clicked, will re-sort the table against it. When it is clicked, the table dims a little loading icon pops up, and the button is not clickable again until that icon is gone and the table re-brightens.
This blog post provided a solution: https://jkotests.wordpress.com/2015/03/20/element-is-not-clickable-due-to-another-element-that-would-receive-the-click/
I think you need to find an element that is on top and wait until it won't be present like:
loading_element_on_top.wait_while_present
your_element.click
If you will provide more details (HTML of the page or even better the url, your code) I will give more detailed answer.
Our site, http://www.racedayworld.com has events that you can register for which are listed in an accordion control by each month ..
I've been getting feedback that says people aren't looking past the first open month as they are not too familiar with the whole accordion thing ..
Can anyone post any suggestions on what type of control I could use that would work - I wanted to do something which wasn't just a normal boring table, but I haven't been really able to think of anything as of yet .. let me know if you have any suggestions..
How about a tree view, or something like the MacOS Finder? On the left a scrolling pane with each month, saying "January: 12 Events" or similar on each line. Then clicking that updates the right pane to a scrollable list of the events...
Done with unobtrusive javascript of course so it degrades nicely. No clues in your tags if you're doing this in Flash...
You might want to consider keeping the control and just do something to draw attention to it. For example, add a "swoopy" arrow that points to the second month with the words "click here for more events!". Just make sure you can disable that once someone expands that second month.