I have on my website a sidebar that can come out from the side on mobile. It is a fixed element, which does not play nice on mobile browsers. I want to prevent being able to scroll the body of the document in order to fix this when scrolling on the sidebar div (but I still want them to be able to scroll the sidebar if there is an overflow).
Here is a video of what I want to prevent:
https://www.youtube.com/watch?v=uqWll2G2Km8&feature=youtu.be
Not sure if I'm understanding exactly what you are looking for, but I'm working on a section of a site right now that requires this type of sidebar that comes out from the side of the page. At first it was doing exactly the same thing for me as well, where the body would scroll while I was scrolling the sidebar content. After some testing it seems whether position: fixed or position: absolute, the only time the page allows me to scroll the side bar and not the content is when I set the
.main-sidebar-container { position: fixed; bottom: 0; }
There are other styles in there as well, but that bottom: 0 seems to be the key to allowing the side bar to scroll while not scrolling the body. I know you don't need to scroll your side bar but maybe setting your main-sidebar-container to bottom: 0 will help in this situation as well. I'll let you know if I come across any other findings as I continue with my own project. Good Luck.
A workaround I found was that if the sidebar is currently active, use JS to set the html height to 100% and overflow to hidden. Not sure how good this is in practice, though.
Related
I am trying to create a layout that has a fixed header that always shows at the top. Additionally a side bar that will have a scroll bar next to it if the content goes past the browser height. Same with the content to the right of the side-bar, I would like it to have its own scroll bar that does not go past the browser height.
Please see this site for an example of what I am looking for. It has all 3 features.
I have tried so many things. Without the fixed header I can get it working by simply making everything height: 100%. But with the fixed header something is going on where the sidebar and content pane scroll bars go way below the browser view.
I feel like I am getting somewhere when I add padding-bottom: 64px; to the items I want to have the scroll bar. The 64px is the height of the header.
Please go through the documentation and tutorial of Bootstrap and you will be able to do it.
For reference go through this JSFiddle: https://jsfiddle.net/jxo6pmju/12/
link = https://jsfiddle.net/jxo6pmju/12/
For scrollbar go through this : https://jsfiddle.net/vrzjLc77/1/
link = https://jsfiddle.net/vrzjLc77/1/
I am a novice at html/css.
I am trying to make sure I never have a sidebar scroll -- no matter what I put in the sidebar-content-area. I prefer my layout height dimensions as I have them now (i.e. the sidebar is not full page). Is there anyway to keep the content area from overflowing....?
Here is my site (if you click on a building you will see sidebar-content-area populate...I need to put some sort of warning in html, but haven't figured out how to do that yet).
https://googledrive.com/host/0BxTGtYdXPZ8QTmdMQVk3X0hQU28/API_Updated_5_3_13.html
To avoid scrolling in your sidebar just add
#sidebarItem,
#sidebar-content-area,
#overview {
overflow: hidden;
}
to your css. This just hides your scrolling.
I'm new to stackoverflow and so I apologize in advance for rehashing any issues already addressed here (I'm sure they are, just not sure how the apply to my specific situation).
Anyway here is the site I'm working on - www.betsyandalex2013.com. I would like to have all of the elements fixed in place. I've been playing around with it using Firebug but when I use position: fixed; on say #wrap I can't scroll over to see the rest of the content. Alternately, when I fix the position of #header, the links disappear. Again, I would ideally like to fix all the elements in place and be able to scroll across (and up/down) to see any content when the browser is resized.
I am not sure what you said. But setting:
#header {
position: fixed;
top: 0;
}
It will work: The header will be out of the natural flux of your page and it will be at top of the screen even when you scroll down/up.
PS: To see the effect put content to #wrap element.
I'm trying to set up a page so that the navigation bar has a background that extends horizontally past the edges of the window, but the actual content of the page remains within a 960px wide container.
Here's a link to what I've got so far, it looks the way I want it to but there's a problem.
http://jsfiddle.net/pFDDV/3/
The problem is that the page will still scroll horizontally to the end of the over extended div, on the right side. It DOESN'T have this problem going left, only right (which I assume is due to the way elements deal with negative margins/positioning). I thought I might be able to just get away with:
body {
width: 100%;
overflow-x: hidden;
}
Which hides the bottom scroll bar, but you can still scroll right with the arrow key, and if you resize the page smaller than the 960px of actual content, you don't get a horizontal scrollbar like you should.
Is there any way I can make the page ignore the width of just that one div?
I'm 99.9% sure I saw this work somewhere, but I can't remember where, and research on the top/left, bottom/right rules of negative margin/positioning leads me to believe this just might not work. Any ideas?
Also: I know I could probably do this with a repeating background image, but I'm trying to avoid using images.
You can use position:absolute & write like this:
#mWrapper {
background: none repeat scroll 0 0 red;
height: 30px;
left: 0;
position: absolute;
right: 0;
}
check this http://jsfiddle.net/sandeep/pFDDV/5/
Are you expecting like this
http://jsfiddle.net/pFDDV/6/
I have a HTML page which a pretty complex layout (see here). I need to put an image on that page which the visitor can drag anywhere so she can remember where she was. I've implemented the bookmark feature but now I need to place the image somewhere where she can easily grab it.
Basically, I'd like the element to stay below the ToC on the right but it shouldn't scroll out of view.
I guess I could use JavaScript to move the element as soon as it starts to scroll out of view but is there a better option? Can I say "float right and below the ToC div or view.top, whichever is greater"?
Or maybe I should create a fixed header (with the links and the maybe the ToC)?
Any other ideas?
It can probably be done using JQuery, but will always be jittery. I would consider a fixed DIV. Of course you could position that below the menu so it will never be higher (= closer towards the top edge) than the menu, and will maintain its position.
.thingy { position: fixed; right: 0px; top: 415px; width: 256px }
That would necessitate that there is nothing else below the menu, otherwise the bookmark icon will overlap other things.
If you just want the image to be fixed, but still scrollable to the top of the window, then you'll need to handle the window's scroll event, and set the image's position to fixed when the image is scrolled to the top.
For an example of this, see the site navigation on QuirksMode.
Alternatively, you could give the entire TOC position: fixed; right: 0;, give the toc a width, and give the teaser a right-margin equal to the TOC's width. There would be no JavaScript requirement this way, and you'd have the entire TOC always visible.