I'm currently restyling my Wordpress theme and would like to implement a fixed navbar. I managed to implement that by adding position:fixed to the header area.
Since the menu is quite big in the first place, I would like to make it smaller when scrolling down, i.e. when the user visits the website, the menu has a height of 75px and when scrolling down it decreases to around 40-50px.
Quick sketch: http://i.imgur.com/iICQkfF.png
Any suggestions on how I may implement this?
Cheers,
Philipp
Since you're asking about WordPress I guess you're OK with using jQuery.
You just need to listen for the $(window).scroll() event and resize the menu based on how much the user has scrolled (which you can get via $(window).scrollTop()). A quick demo:
http://jsfiddle.net/FMypW/1/
(it's not an actual menu, but just showing the functionality work)
var moved = false;
$(window).scroll(function(){
if( $(this).scrollTop() < 2000 ){
$('.header').height(200 - (200 * $(this).scrollTop() / $('body').height()));
if (!moved && $('.header').height() < 170)
{
$('.header').animate({top:"-40px"}); moved = true;
} else if (moved && $('.header').height() > 170)
{
$('.header').animate({top:"0px"}); moved = false;
}
}
});
And here's the DEMO
Additionally, you might want to check out these tutorials instead of inventing the wheel yourself:
How to create a resizing menu bar
Animated Resizing Header On Scroll
Related
Does anyone know how to hide an object depending on how much the user has scrolled down the page?
I have some floating social buttons on my website and I want them to hide when the scroll reaches the footer (the very bottom) and then appear once they scroll back up.
Can't be done with CSS alone, you have to use javascript to keep track of how much the user has scrolled.
If you can use jQuery, you have to do something like this:
$(window).scroll(function() {
if($(window).scrollTop() + $(window).height() == $(document).height()) {
$("#social").hide();
} else {
$("#social").show();
}
});
See jsfiddle. However, this is just a guess of what you need as you didn't provide the proper code. If you need a javascript only solution (without jQuery) let me know.
Having trouble with a overflow y scroll on this page in safari:
http://www.lizzygee.co.uk/product/classic/
If you go to the details tab and click a link further down the page and go to a different page, when you press the back button to return to the product page again the overflow-y scroll suddenly appears to stop working?
Does anyone know what this issue might be ?
Regards
I have the same problem (on mac — iOS works great). It seems like a bug in Safari's bfcache (back and forward cache). I don't really have any good solutions, but you can always force a rerendering of the page:
<script>
var is_chrome = navigator.userAgent.indexOf('Chrome') > -1;
var is_safari = navigator.userAgent.indexOf("Safari") > -1 && !is_chrome;
if (is_safari) {
window.onpageshow = function(event) {
if (event.persisted) {
window.location.reload()
}
};
}
</script>
If you add {-webkit-overflow-scrolling: touch} to your CSS of the overflowing div it should fix the problem. The side effect is that the div will now keep scrolling if you swipe it like android does naturally.
Can anyone point me in the right direction? I have a DIV with a background image that is fixed, but I'd like it to scroll at a slower rate when scrolling down the page. I'm not great with jQuery or CSS3 so asking for some help.
Thanks in advance.
This may help: http://stephband.info/jparallax/
It turns nodes into absolutely positioned layers that move in response to the mouse.
http://potentpages.com/parallax-scroll-tutorial/
Here is a tutorial that my company and I created describing how to make a webpage like you are talking about. It doesn't require any jQuery or advanced CSS.
There are numerous libraries and tutorials on how to create parallax websites. We listed some here:
http://potentpages.com/parallax-tutorials/
The relevant javascript is:
var topDiv = document.getElementById("topDiv");
var speed = 1.5;
window.onscroll = function()
{
var yOffset = window.pageYOffset;
topDiv.style.backgroundPosition = "0px "+ (yOffset / speed) + "px";
}
Where "topDiv" is the element that you want to move slower than the "regular scrolling speed." To make the element move slower, increase the speed variable. To make it move slower, decrease it.
There are multiple tutorials around the web regarding parallax effect. Here area two just form a simple google search for "parallax effect tutorial":
http://net.tutsplus.com/tutorials/html-css-techniques/simple-parallax-scrolling-technique/
http://richardshepherd.com/smashing/parallax/
http://stephband.info/jparallax/
window.onscroll = function(e)
{
var val = document.body.scrollTop / your_scroll_factor;
document.getElementById('your_background_image').style.posTop = -val;
}
I am looking for a solution to a unique problem. I have a wp_menu underneath the "Network Menu" on a theme I developing for a multisite build. There is a little ring in the center of the menu that holds the logo, and I am curious if there is a way to get a transparent list item to hold that place, and allow all other "legitimate" list items to wrap around that, so either to the left or right.
I already have a filter that inserts a list item that I can customize by adding css, I just don't know how to make one list item in particular hold the place where the circle exists.
The website is:
http://www.mountainjackscreative.com/sandbox/edts/sample-page/
Any help, or even just ideas would be great!
Thanks everyone.
Since you're using jQuery you could do some math on the menu.
EDIT: Put this before ending of your head tag
LAST_EDIT: Here's the JS fiddle http://jsfiddle.net/BsnFW/14/. Last try :)
$(document).ready(function() {
menuBreakPoint = 200; //width in px after which you want to insert the space (experiment with this)
menuWidth = 0;
rightMenuStart = 600; //width in px from left of menu container div to the right
$('.sub_site_menu li').each( function() {
menuWidth += $(this).width();
if (menuWidth >= menuBreakPoint) {
$(this).css('margin-left', (rightMenuStart - menuWidth));
return false; //break out of each loop
}
});
});
Use this.
Can you not breakup the list into two? float one left and the other right. Provide the appropriate ul margins so nothing shows up on the logo?
I am going to go with the jquery solution as it will most likely render the best results across all browsers. But I did stumble across this other resource regarding a soon to be implemented feature in CSS3
Included is a script that forces compatability with the new CSS3 "column" functionality.
http://www.csscripting.com/css-multi-column/
Is there anyway to change the position style of an element dynamically from 'absolute' to 'fixed' dynamically in IE 9 and before?
In other words we want an element to move vertically on the page till a point when it would reach at the top of the window and then at that point make it fixed so it wont just go up anymore? Makes sense?
It just works in my copy of IE 9.
document.getElementById('foo').style.position = 'fixed';
What you're looking for is a way to change this value based on another in-page condition.
I'd suggest what you need is something akin to this (using jQuery):
var targetElement = $('#your-fixed-absolute-element');
var togglePixelY = 100; // change to suit your needs
$(window).bind('scroll resize',function(){
if($(this).css('scrollTop') <= togglePixelY && !targetElement.hasClass('absolute')) {
targetElement.addClass('absolute').removeClass('fixed');
} else if($(this).css('scrollTop') > togglePixelY && !targetElement.hasClass('fixed')) {
targetElement.addClass('fixed').removeClass('absolute');
}
});
Here is another useful question you can read up on:
Get current scroll position and pass it as a variable with a link?
or Position of a div relative to the window?
and there are plugins for this (look for 'sticky sidebar' for example) and a nice tutorial for it here: http://designwoop.com/2011/01/how-to-create-a-jquery-sticky-sidebar/
Using jQuery?
http://api.jquery.com/css/