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){ ... }
Related
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?
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 want to have a DIV around my main navigation, which contains my navigation, its size will be fixed based on the .. e.g. 600 px, what I want is if the screen resolution is small than the size of navigation, it will add Arrows on left and right so once clicked it will scroll and show the hidden navigation buttons, please check the screenshot to make it more clear..
my question is, is there any jquery plugin that does something similar, if so it will save me a lot of time, OR where should I get started, any direction would be highly appreciated..
This shouldn't be to hard. Take a look at this plugin: http://owlgraphic.com/owlcarousel/
It's a responsive carousel and when you look around at the demo-section, you will see that what you want is possible with the carousel.
In General:
I need my nav to behave like a mobile app (swipe effect), but WITHOUT accessing it via a mobile product. (So JQuery Mobile and such isn't applicable here... at least I don't think.)
Specifics:
My nav (example attached below) is a set of horizontally arranged icons. I would like to be able to scroll horizontally, but instead of simply scrolling the icons over, I'd like them to slide in increments (much like how an iPhone's pages slide into discrete positions with swipes across the screen.) This means regardless of how much the user scrolls, only the same amount of slide is performed.
View work-in-progress here
My Problem:
So I currently have this (crappy/buggy) version working, but it's based on JQuery's .mousemove() which means as I cause the menu to move, the cursor is still also moving and no longer over the icon I wish to click. If I based it on .scroll(), then the containing div would have to be scrollable (which would show the scrollbars).
So: Is there...
a) an example of this already done somewhere? or
b) a way to make a div scrollable but without showing the scrollbars
This site is being used in a specific way for a specific purpose, so please don't reply just to tell me that hidden scrollbars on a scrollable div is bad juju/annoying for the users.
I found something called "Web In Touch". Could this help?
Many MANY thanks in advance.
http://www.jacksasylum.eu/ContentFlow/
Have you tried content flow? It can do horizontal scrolling for you on button presses (and you can map this to something else). I understand this isn't what you want exactly, but it might work, since you want to horizontally flow/scroll image icons.
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.