I am attempting to recreate the initial onScroll effect found on this page: https://medium.com/#mariusc23/hide-header-on-scroll-down-show-on-scroll-up-67bbaae9a78c.
If you watch carefully, when you scroll, there is no indication that the nav is position:fixed. It looks as if you have just created a <nav> and kept its position:inherant
When you scroll down a little further, and then scroll up, you get the hidden-nav on scroll effect. But, in every tutorial or trick I've research that recreate this effect it is always obvious that the nav is fixed and the content is about to scroll beneath it, and then the nav hides itself.
I've tried resetting position classes until after the nav is not in view, but nothing is working.
Is this particular iteration of this effect something that can only be accomplished with jQuery?
Related
Im trying to create a scroll driven slideshow using the js-lib skrollr.
I want a certain ul to get fixed once the scroll reach a certain positions. then i want its li's to keep scrolling while the ul stays fixes. anyone that can help here?
I have prepared some code here: jsfiddle.net/tfzLs414/
Reference case: http://www.vectorworks2015.net
(the images below the '#01'-texts.)
Not sure if this question been answered already.
I'm looking to create a navigation that collapses when the user scrolls. I would like something similar to this site http://adcglobal.org/. The navigation becomes smaller as you scroll. I would like to have mine collapse into a menu (similar to a responsive navigation menu except, this is on scroll and not #media to change screen size).
I'm playing around with jQuery and this is what I have so far. The problem with this is that everything disappears as soon as you start scrolling.
$(window).scroll(function(){
$("ul").hide();
});
I haven't used Javascript/jQuery much to have a good understanding on the library and what can or can't be done.
You'll want to use something like:
$("ul").removeClass('top');
$("ul").addClass('scroll');
where in your css class top you will have all the styles set for when it's at the top, and in class scroll you will have all the styles for after you scroll.
You will also likely want check each time the user scrolls the
value of $("ul").offSet().top, if it is 0, you want to add the class top back to the element, and remove scroll. You can also check that value to make sure a certain amount has scroll prior to changes the classes, eg:
if ($("ul").offSet().top > 20){ ... }
Not sure if the title made sense, but I noticed in the wordpress 3.8.1 admin panel, If you resize your window to where the sidebar has menu items blocked from view, it is normal positioning, which allows the sidebar to scroll.
If all the items are visible, then the sidebar has fixed positioning so that only the content to the right of the sidebar will scroll.
Neat little effect.
I was thinking it requires jQuery to add a class or change css. Maybe if the last item in the sidebar is visible then add the class, else leave it alone.
Not sure how to actually code that though.
Can someone help out, maybe even a basic fiddle?
You can do this with simple CSS.
.div_name {
position:fixed;
}
check W3schools Position fixed property for tags
I don't even know what I want to do would be called
Please take a quick look at this page:
http://www.philsalesses.com/plasma-pong/
You'll see the title Plasma Pong and an image under it, on the left side. When I scroll the article, I'd like it to stay put while the page scrolls. However, you'll notice when you get the bottom of the page, there is a footer and there wouldn't be enough room for the title and image if I just made it completely static.
I'd like that to stay put until the footer hits, then scroll. When you scroll back up the page, it will scroll a little bit, until there is room, then stay put again. The same effect, but in reverse. Any idea what to look up how I could do this?
Set the titles css position to fixed. Then use javascript to detect a scroll event when certain criteria are met reset it to an absolute position so that it stays above the footer. Then when remove the absolute positioning when the page is scrolled away from the footer. To see a working example go to quirksmode.org. In his articles he has the effect you are looking for.
When I take mouse over the Navigation menu links (About Us..), the page moves to left. Is that due to javascript?
link text
It's because of the scrollbar that appears at the browser window's right side. It seems to me that there is a design error causing the content to be much larger with the menu hovered ...
if you hover the menu, the page gets so long that scrollbars occur - and that causes the page to "move to left" (it stays in the center of your viewport, which is what it should do). to fix this, find out whats causing this overflow (the page isn't looking that long, i don't know where the scrollbars come from) or set overflow-y:scroll for your body, so there's always a scrollbar (which would be the bad "i don't know what else to do to fix this"-solution)
Try moving the UL dropdown elements away from the bottom of the page or set them to display:none until after you've absolutely positioned them at the top of the page. visibility:hidden does not take the elemtens out of the flow of the document but just hides them.
A better bet though would be to make them children of the <a> tags you already have, so they only need to be displayed rather than displayed and moved.