I'm trying to get my background to scroll with content and stick to the top of the page. My background is in a fixed position under my header.
Here's an example http://www.crunchyroll.com/
is there a way to do it in css? I'm fairly new to javascript but want to see if it can be done in css if not then I'll try it in javascript.
Add the following style:
background-attachment: scroll;
This will change the background attachment to the default fixed to scroll so that it scrolls with the page rather than being stuck in one position.
Here's a working example on JSFiddle.net.
Related
I'm looking for either a plug-in or pure JS/Jquery solution for a scrolling animation.
Basically when users scrolls to a certain section, and continues scrolling, the background of that section stays still while text and images fade in and out (on top of that static background) as user scrolls.
It's similar to this website: http://www.bagigia.com/ scroll down to "designer" "the idea", you'll get a good idea of what I'm trying to accomplish.
You can do it with just css
body {
background-attachment: fixed;
}
I have a strange question -- my apologies if it is a silly one. Please note the code it too large to reproduce in a snippit so I am posting the link here.
The page I am building is a small intranet page with a full width header. When the user clicks on the button beside the submit button, a div from the top opens and pushes the content down. My problem is in my code editor there is no scroll bar on the page, so when the div opens it pops the entire page slightly over to the left to compensate for the scroll bar.
On codepen, I've pasted the shell of the site, but because a scroll bar is included in its code area, the problem cannot be reperoduced exaclty.
Is there any way I can compensate for the lack of scroll bar in my code? Perhaps force one to be there?
Any help would be grand.
You can force a vertical scrollbar by adding the following CSS rule to the body:
overflow-y: scroll;
EDIT: I misunderstood your question.
Have the whole moving element absolute positioned and wrap it around a container. The scrollbar will appear on the wrapping container, not on the element itself. And because it will be with position absolute there won't be any change of position once the scrollbar appears.
I am trying to get the effect of moving background image on a section like in below website.
Just about the footer when you scroll up and down the image behind "FIND A CHIPOTLE" scrolls and moves. I am not able to achieve the desired effect.
Please help.
You can do it using CSS:
background-attachment: fixed;
The body of the page has a background image. Most of the divs above it have a white background, but the one where you can see the image scrolling has "background: transparent;" which allows you to see the image attached to the page body. It's not the image itself that is scrolling but the divs above it.
Im working on a Website and everything is ok, except my webside is "shaking". (I'm using chrome)
The margin of my main Container is changing on some sides and i have no idea why. They have the same html code, it must have something to do with the content in the main div-container
My Website: www.anitalernt.de
http://www.anitalernt.de/about-us.html is a bit more to the left and http://www.anitalernt.de/index.html after getting a task (just click some buttons) also.
Has someone a idea?
Always display the scrollbar
html {
overflow-y: scroll;
}
See:
Always show browser scrollbar to prevent page jumping
How to always show the vertical scrollbar in a browser?
You could add
html{ overflow-y: scroll;}
to your css.
Places a permanent (but sometimes empty) scroll bar on the window
The issue is most likely caused by the scrollbar appearing, which reduces the viewable area of the browser window and may adjust the contents accordingly.
There are a couple possible workarounds:
You could extend the length of the adjusted web-page so that the content (post-adjustment) also runs "below the fold"
Alternatively, you could encase everything in an absolute positioned DIV which won't "shake" when the viewable area contracts on the scrollbar's appearance.
Or -- depending on your specific content -- you could disable the scrollbar. Although this last workaround is only advisable in very specific cases.
body{
margin: 0;
}
seems to resolve this without having to add a dummy scrollbar :)
I had the same problem because of jQuery scroll where I was checking the scroll value and using that. I fixed my navigation bar by using addClass and removeClass, adding class was not working because I did not use !important in CSS class.
I have made the main framework of my webpage in HTML / CSS but now realise that i need a sticky footer which is always stuck at the bottom of the screen so position fixed and i need the internal segment where all webpage content goes called (wrapper) to stretch from the bottom of the header to the top of the footer, so what i would like is that when you zoom out on the web browser the wight segment fits the whole height of the browser so that it would work on any display height.
Here is a JS fiddle
http://jsfiddle.net/Q8JpC/5/
If anyone finds out how to do this please could you write the code in stack overflow as a reply as this jsfiddle is just my test website and will not be using it for the real thing.
I have tried setting the wrapper as
height:100vh;,
this does always fill the screens height but it does not allow for when i add content it does not extend to fit the content off the screen.
Thankyou very much for any help ! thanks
didn't apply it to your design but i often use this technique:
See: Modern sticky footers
I would also suggest to use html5 markup tags, they are created to get the semantics right instead of using classes like header, nag, footer, etc...
EDIT.
I edited your fiddle here:
JSFiddle
Just add:
html {
position: relative;
min-height: 100%; }
Besides that, change the body to position absolute instead of fixed and add a margin-body to the body element w(same as height of the footer).