React - Javascript horizontal menu scrolling as you scroll - javascript

I'm trying to make a horizontal menu that is moving to the left-right (kind of a spyscroll) as you move through the app.
Currently I have only underline and text colour change because I didn't know how to make it "scroll" as you move down the app... Does anyone have an idea how to do that? Thank you in advance.
Attached image: Menu and App image

Refer this video
set active class name for each section in the header and get the scroll value from the event listener and use conditions to apply the active class name

I would say the most common way of changing an element based on scrolling is to use Intersection observer. Using intersection observer you can specify what should happen when a certain element is not visible/visible/visible partialy.
The second method I can think of is to manually calculate the position of window:
window.pageYOffset
And set a condition like so:
if(window.pageYOffset > XX){}

Add a listener to element which has the vertical scroll.
verticalScrollEl.addEventListener("scroll", (e) => {
horizontalScrollEl.scrollLeft = e.target.scrollLeft;
});

Related

How can I target a specific element on scroll in React using JS?

So I want to target my About section on scroll, to add a class to the about section to make it fade in on scroll. As well as other sections as well I would like to target on scroll. Is there a way to target the specific element by ID or something on scroll?
showAbout = () => {
const top = window.pageYOffset;
if(top>400)
this.setState({
showAbout: true,
})
}
componentDidMount(){
window.addEventListener("scroll", this.showAbout)
}
This is the code I have currently, 400 is more of an arbitrary number, its different on each screen size. I was wondering if there is a way to do this same function, but by targeting the element ID on scroll?
Thank you for the help!
You can calculate the exact window offset for each of these elements on page load and trigger your animation when those offsets hit. You would also need to have a window.resize event that re-calculates those offsets for when a user resizes their window (or changes orientation on a phone).
OR, you can use a pre-built JS library to do this a lot easier for you. My recommendation is Scroll Magic:
https://scrollmagic.io/
You can indeed set up trigger points based on element IDs, and it works very smoothly.

Mechanism to update scroll index based on scroll position

I notice a feature on this site:
and feature on this site:
If you scroll the items in the middle section, the left menu title will update based on the position of middle section scroll position.
I know it has to handle the scroll event in the middle section, but then what?
Does it just use an existing library? What is the mechanism to implement this feature?
Ok so here we have two things to deal with :
We must know when the top of a specific section is at the top of the viewport (your webrowser window)
Then and only then when the specific section if at the top we update the menu according to it
You can easily do that by putting a specific ID to your section, then get the offset.top() position of that element and listening to the window.onscroll and when the current scroll position is equal to the offset.top() position of your element you will add maybe an active class to your menu
like so
<div id="my-section"></div>
var mySection = document.getElementById("my-section"),
mySectionTopPosition = mySection.offsetTop,
currentWindowScrollPosition = window.pageYOffset;
Then if currentWindowScrollPostion === mySectionTopPosition you will do something accordingly
See this : Getting Window X Y position for scroll and On Scroll Animation using jQuery

if cursor inside div then display block jquery

Here is a jsfiddle of the problem:
http://jsfiddle.net/MEJgb/
I want it so when you hover over anywhere in the footer the toggledown will become active and will remain active until you move the mouse from the footer.
Your problem is the following line:
jQuery('html,body').animate({
scrollTop: jQuery("#footer_copy_right").offset().top
}, 'slow');
This causes the whole page to move adn thus the item you were hovering over is no longer being hovered over so it triggers your event again and hides your text. When I was testing this was causing the hover content to move back under my mouse and thus trigger again...
I would personally not use hover in this situation and let the user click to expand and then click again to collapse.
If you want to keep using the hover option then you need to decide what the event to trigger the collapse should be. Clearly the current choice (mouse no longer over the arrow) is insufficient.
Often what I will do is attach the hover to a block containing the visible triggering block as well as the contents that are going to be displayed. This way your content won't collapse until you have moved off the newly displayed content.
http://jsfiddle.net/AjHwM/ is an example of such a thing.
Even if I'm not sure what your actual goal is, maybe the document.elementFromPoint() method is what helps you out here.
It is invoked like
if( document.elementFromPoint( event.pageX, event.pageY ) === $('#footer')[0] ) { }
That code, within your hover aka mouseenter / mouseleave handlers, would compare the node which lays under the current absolute mouse cursor X/Y positions against the #footer node.
Ref.: MDN doc, W3C doc

add animation to an tab navigation

I was wondering what could be the easiest way to add animation to some tab navigation.
I'm developing a small documentation website, Documentation, and as you can see I have that small arrow that adds up to the tab when navigation.
Well, what I was thinking is what if I can do it like this : Sample ; I tried something, I added a span via JS and then on click event ( applied to the li elements ) trigger the arrow animation. The thing is that doing that I stopped the script which is responsible for making the tabs work as they do stop.
So is there another way to achieve something like that ? And what would be the logic ?
Simplest would be to add a narrow absolute position div inside st_slide_container and position to the right. Inside that new element add another element that is just large enough for your arrow icon and is position absolute.
Either use callback of tabs change( depends on what is available in plugin API) or add another click handler to a.st_tab.
In this event handler you can get the index of current tab and apply animation of position top to the small arrow element
EDIT: Example of click handler to get index which would be multiplier for the top animation
$('a.st_tab').click(function(){
alert($(this).parent().index())
})

How to know when you scrolled down?

Just visit http://techcrunch.com/ and scroll down. How do they do it? How that top line appears with a new logo? Is there any jQuery trick? How to determine when person scrolled down certain amount of pixels and show to him new html?
They might just use jQuery-Waypoints which lets you trigger events if the user "passes" a certain HTML-Element.
Example ( taken from page ):
$('.entry').waypoint(function() {
alert('You have scrolled to an entry.');
});
They are using jquery sonar plugin[1] which defines special jquery events[2].
The trick is putting a static positioned top element, on a very high z-index layer, with the part to be occupied by the dynamic logo initially transparent. When the jquery event is thrown, they just make the new logo visible above any underlying content.
[1] http://artzstudio.com/files/jquery-boston-2010/jquery.sonar/jquery.sonar.js
[2] http://benalman.com/news/2010/03/jquery-special-events/#api
Maybe they use window.pageYOffset and there is also document.documentElement.scrollHeight and finally they use the window.onscroll event.
They use the window.scroll() function to listen for the scroll event, then use window.scrollTop() to determine the offset of the logo from the top of the page.
see: http://jsfiddle.net/XkMrc/2/

Categories