here's what I want. I want a top bar AND navigation menu attached to the bar. I've done this no problem. I want to bar and the navigation menu to follow me if I scroll up and down.I can do this with a position fixed. but, if i have a fixed position, then when i scroll left to right, they follow.
I want to have both the top bar and the navigation menu follow as the user scrolls up and down but if they scroll left to right i want it to act like an absolute position, and become partially or completely hidden (depending on how much the user scrolls).
Is this possible? I've seen a couple of topics but haven't been able to get it to work for me.
Here is my jfiddle http://jsfiddle.net/kyleseitz/rX4Vh/11/
I want EVERYTHING to move down with me when I scroll down and back up when I scroll up. But, if i get a horizontal scroll bar, I want to pass the viewing window over it.
I found the javascript on a previous question but i can't get it to work for me.
.slim {position: absolute;}
<div id="phantombar" class="slim">
<!--I Technically don't need these if they are not neccessary-->
<div id="phantombar" class="fixed_elem">
<div id="headWrap">
ScrollToFixed is a jQuery plugin that used to fix elements on the page (top, bottom, anywhere); however, it still allows the element to continue to move left or right with the horizontal scroll.
Website: https://github.com/bigspotteddog/ScrollToFixed
Demo: http://bigspotteddog.github.io/ScrollToFixed/
try to use this. Maybe works :
$(function(){
var elements = $('#ptm, #spt, #support, #act, #left_nav');
elements.css('position', 'absolute');
$(window).scroll(function(){
if($(this).scrollLeft()){
elements.removeAttr('style').css('position', 'absolute');
}else{
elements.removeAttr('style').css('position', 'fixed');
}
});
});
elements can you add more, depending on needs.
Related
I've noticed on sites like The New Yorker that when on mobile if you scroll to the very top and continue to scroll upwards the navbar stays firmly attached to the top of the window. On my site, the navbar stays connected to the rest of the content when I scroll up and continue past the body of the page. How would I go about emulating what The New Yorker does. I have looked at their page's css but can't seem to tell what gives that functionality. Any help would be appreciated.
setting the position:fixed and top:0 to the navbar should work, although after that you will have to determine the height occupied by the navbar and give your body content padding set to that height to have a neat display. Please check this link : Why the paragraph is hidden behind navbar however navbar comes first in html source?
I have a div that holds multiple draggable elements.
When I drag an elements to the right, the horizontal scroll bar appears and I can scroll the div. This is what it looks like:
However, when I drag the elements left, the horizontal scroll bar doesn't show. Example:
I have the overflow property set to auto.
I understand that this is the deafult behavior of the browser, and that not showing the scroll bar is "correct", however if anyone has any suggestions how to make the overflow also work when moving elements left, it would be greatly appreciated! TIA!
No. When you drag an element to the right you are increasing the page width and triggering a horizontal scrollbar. When you drag an element to the left, you are simply moving it off the page.
You might try dynamically increasing the page width based on how far the element has been dragged outside the left edge of the page.
The browser is working as designed.
I'm using bootstrap. I want a div element to move as I scroll the page downwards. How do I accomplish this please? For instance, I want the div element to follow me downwards as I scroll downwards and still maintain its position
This can accomplished with functionality jQuery plugin.
See more on the API call here
This jQuery plugin is used to fix elements on the page (top, bottom, anywhere); however, it still allows the element to continue to move left or right with the horizontal scroll.
Given an option marginTop, the element will stop moving vertically upward once the vertical scroll has reached the target position; but, the element will still move horizontally as the page is scrolled left or right. Once the page has been scrolled back down past the target position, the element will be restored to its original position on the page.
Using CSS, you can do it with the position attribute.
div{
position: fixed;
}
I am using Foundation for the first time. I've found it's "Magellan" menu thingy, which makes the navigation sticky after scrolling down.
This feature works for me without problems, but i need to have the menu positioned on the bottom of the window right after header, which has 100% height. I managed to do that with margin-top and relative position, but both of them "broke" the sticky menu function.
When I used the margin-top method, the menu was sticky, but had the margin on itself, so it basically dissapeared on the top of the window.
I have a picture explaining what i need to make. The left side is what i have now and the right side is what I need to make.
So basically,i need to pull the menu up to appear on the bottom of the window, but work with the "Magellan sticky feature". Can anyone help me with this?
try to add this CSS code
.magellan-container{
top:auto !important;
bottom:0;
}
I'm working on this web application that manages a DB.
Everytime I go to this certain page that has a big list, the vertical scroll bar appears on the right side of the browser.
That, however, makes my whole page move to the side by a bit.
It is most noticeable if you look at the horizontal menu bar I have at the top of the page.
Is there anyway to overcome this?
Thank you.
You can enable the scrollbar to always be shown by applying the following to you body: overflow-y:scroll;
body
{
background:#DDDDDD;
overflow-y:scroll;
}