Just wondering the best way to tackle this.
Let's say I have a fixed navbar that sits exactly centered vertically.
As I'm scrolling, I want to find out the element behind the nav bar.
Lets say I have a nav like so:
<nav>
<ul>
<li></li>
<li></li>
<li></li>
</ul>
</nav>
And then sections like so:
<section id="about"></section>
<section id="services"></section>
<section id="contact"></section>
If I give them all a fixed height of say 1000px so that we are able to scroll properly, how can I detect when the navbar is say over the 'services' section, so I can append an active class etc.
I was going to detect the scroll position from the top of the document, and compare that to the top positions of the sections which I'd be able to find out where the navbar is located from there, but is this the best way to tackle this?
Example: http://jsfiddle.net/c8jhajde/
Related
I've got a page using gsap to animate scrolling.
To navigate, the menu is setup with a simple "scroll to ID" approach which is intercepted by gsap to do the scrolling.
This works as expected to scroll down the page, but not up the page. However if you've scrolled down the page, selecting the element above from the menu doesn't scroll up. But selecting an element 2 up from the current one, then scrolls up 1 element.
An example of the code;
<nav>
<ul>
<li>Section 1</li>
<li>Section 2</li>
</ul>
</nav>
<section id="section1" class="panel">
</section>
gsap.utils.toArray("nav a").forEach(function(a) {
a.addEventListener("click", function(e) {
e.preventDefault();
gsap.to(window, {duration: 1, scrollTo: e.target.getAttribute("href")});
});
});
A demo is here on codepen
This is a logical issue. Once you've scrolled past a section, the element has been moved down by 100vh. So when you navigate to its y offset, it's 100vh below where it was at the start.
There are different ways to fix it. The easiest may be to keep an array of values of the original offset and scrollTo those values instead. Demo.
Sides notes:
You can just use the selector strings as your targets in GSAP when you don't need it scoped further.
You should use a double colon (::) for pseudo-elements in CSS.
If you're going to use ES6 features like const some places, you might as well use them throughout your code.
You're more likely to get help even quicker in the GreenSock forums.
I am trying to make something where I have a div that scrolls. Inside the div there are "title" elements and as I scroll I want the title element of that section to stick to the top of the div and remain there like a header.
Sort of like what people see on webpages where the menu sticks to the stop of a page as you scroll. This example can clearly be seen on the Mac OS X calendar in the "Day" view.
I think I can deal with the making the element stick part, I saw an interesting solution that I think I can adapt. However I was wondering if someone can help me figure out how to know if a title element has reached the top of a scrollable div.
The use case is as follows:
<div class="container">
<div class="floatLeft">
<div class="scrollingDiv" style="height:100px; overflow-y:scroll; overflow-x:hidden;">
<ul>
<li>
<div>
<h4>Title</h4>
<div>Content</div>
</div>
</li>
<li>
<div>
<h4>Title</h4>
<div>Content</div>
</div>
</li>
</ul>
</div>
</div>
<div class="floatRight"></div>
</div>
How would I know when the second "Title" has hit the top of my "scrollingDiv", not the top of the page itself?
Thanks!
You can make an element sticky by setting it's top property to zero and making setting position:absolute; via css.
.stickyTop {
position:absolute;
top:0px;
}
This will ensure the element stays at the top of the page always.
To identify if an element has reached the top of window you can use offset() to identify the current position and check if it's neared the top.
$('div.scrollingDiv').scroll(function() {
var active = null;
$('.scrollingDiv h4').each(function(idx, val) {
var topOffset = $(val).offset().top;
if (topOffset < 20) // elem is 20 px from top
{
// Element nearest the top
active = $(val);
}
console.log(active); // Element closest to the top
});
});
The above simply loops though all the h4 properties searching for the element closest to the top of the page, and logs it.
You can combine these together to create something like a Funky jsFiddle.
I have a menu with loadContent, which load the page in div #main, so I can change only the content and the menu always stay.
<ul>
<li class="page1" onclick="loadContent('page1.php');">page1</li>
<li class="page2" onclick="loadContent('page2.php');">page2</li>
<li class="page3" onclick="loadContent('page3.php');">page3</li>
</ul>
How can I slide smooth this content, when I click one of the pages on the menu, may be right to left or top to bottom, so I can hide "old" page and show (push out) the "new" page.
Look at this, there are some cool effects here http://jqueryui.com/effect/
I have a <ul> element. It's CSS overflow property is scroll.
I have several list elements in the list, such that there is a scrollbar.
<ul style="overflow: scroll; height: 100px;">
<li></li>
<li></li>
<li></li>
<li></li>
<li></li>
<li></li>
...
<li></li> // how can I judge if this element is in the viewport?
</ul>
How can I determine if a specific list item is visible in that list?
Also, if it's not currently visible, what property can I use to make it scroll into view?
PS: No libraries, please (jQuery, MooTools, etc).
This is a function I just came up with.
I did some testing on the jsFiddle link at the end of this answer, and it seems consistent.
function elementInViewOfParent(elem) {
var container = elem.parentNode;
return (container.scrollTop + container.offsetHeight) >= elem.offsetTop &&
(container.scrollTop - elem.offsetHeight) <= elem.offsetTop;
}
jsFiddle example - Just scroll it wherever you want, and click the button.
It checks for the red LI's visiblity, in this example.
If you are okay with using jQuery, this will scroll so that elem is visible and at the top.
function scrollTo(elem) {
var offset = $(elem).offset();
$(window).scrollTop(offset.top);
}
(You could even animate the scroll: jQuery scroll to element).
Another solution would be to use <a target="foo"></a>, and the change the URL fragment to scroll to a particular element, but you specifically asked to be able to tell from JavaScript, which this does not allow you to do.
I have a div which contains several elements:
<div class="menuItem designMenu" id="dMenu">
<ul class="menuList menu">
<li class="menuHeader">Design</li>
<li class="projectHeader">Mother</li>
<li class="projectBody">Some text here</li>
<li class="more">More</li>
</ul>
</div>
I need to get the height of the dMenu items that I can animate it upwards, including all the content inside. My Javascript currently:
var designHeight = $("#dMenu").height();
Returns nothing.
I've tried offsetHeight, scrollHeight, and everything else Google turns up. I'm running the jQuery at the end of the body, inside a document ready function.
The reason to get the height to animate, instead of doing it manually, is that a: I'd like to learn how and b: I don't yet know how many items will be in the div.
Are the lis within the ul floated? If so, and the parent does not have overflow: hidden the parent collapses and therefor has no height. Try (if possible) adding overflow: hidden to the parent element, or hard code a height in your CSS.
I'm using scrollHeight to get at what I want. I also, embarrassingly, noticed as I was fiddling with things I was loading my JS before loading JQuery. So ashamed I didn't spot that.