I am trying to get sticky positioning to work with scroll snap but I am having difficulties.
I looked at the example on CSS Tricks (in codepen link) on how to use scroll snap and found it breaks if you don't have
overflow-y: scroll;
on the container (commented out on line 3). But if you do, then it breaks my two column sticky scrolling. Does anyone have any ideas on how I can use both?
https://codepen.io/shellwe/pen/abzgNzQ
If not anyone have some good suggestions on how to achieve the scroll snap in JS? I found this that may work but I would love to have the CSS handle it for me.
http://jsfiddle.net/kZY9R/79/
For anyone who comes by this, the reason you need the overflow-y: scroll is because you also need a set height and it scrolls within that constraint. I finally got back to this project and took a while to figure out why it won't work.
Cheers!
Related
I have a question, I have a div that keeps moving with my scroll,and it drives me crazy because i can't fix this bug, tried a few things but they didn't work out..
Here's the link to a GIF with it:
https://i.gyazo.com/24186375915a9ede01700ac879badbc7.mp4
You Set Fixed Position on Your Div..Try to change that Css Property and then Proceed Further..
I need to show different Ionic lists in a tabbed menu. The problem was include those tabs with the slide option. So i found this: tabbedSlideBox.
Made it work, edited it's styling to go with my app. But I can't get the tabs menú to stay fixed and don't move.
I made a pen to show you my problem: http://codepen.io/anon/pen/qdjxrB
Line 21 you can see the style inline with the fixed property that doesn't work. It keeps moving with the content, which is the opposite of what I need, I need to be able to move the list up and down and the tab menu should remain in it's place, but it should be able to move to right and left.
I believe it has something to do with the translate3d, but I can't figure out how to solve it without breaking the whole thing.
Tried to modify it's directive but I ended up breaking it..
Hope someone can help me.
Thank you.
EDIT
I've been reading about fixed positioning and absolute3d transitions, and they don't get along, the fixed element behaves as it was absolute positioned because it takes it's container as reference for the positioning: http://codepen.io/markdebeer/pen/qrBDm, but if anyone comes with a solution to this i'll be grateful.
I can't seem to get the graphics on the top and the bottom of the navigation menu to have no gaps. Since the top and bottom images need to be stretched it can't be done as a background image. The 3 pieces need to be touching. I have tried using tables, setting margins and padding to 0px on everything, even tried using a css clear file and I still cannot get them touching.
jsFiddle... http://jsfiddle.net/PerryCS/JXVGM/1/
Am I trying to force the browser to do something it's not capable of doing? Where is the extra spacing coming from?
Please and thank you!
I don't mind trying things out. I have spent about 11 hours fiddling with this and I'm very frustrated at the lack of understanding on my part at why there is still a space. Ugh.
Needs to work on IE7 and above please. :)
Add display: block to .navribbon img: http://jsfiddle.net/thirtydot/JXVGM/2/
I have been looking around and seem to find lots about aligning a div vertically however not with a dynamic height div surrounding it.. i have a moch up of what i require, built from all sorts of different templates i have found.. i just cant get it to do what I want maybey i am totally wrong?.. i thought it would be simple however has turned south.. i am hoping somone on here can understand what i mean and fix it easily as I am lost... tried so many different things however just end up back to square one..
I have checked out "vertically-center-content-with-css" at vdotmedia and this is exactly what i need the div to do however i can't get it working in the template i have come up with.. i do want it to be cross browser and ie6 would be nice but at least ie7..
Thanks in advanced!
The code was a bit long for here so see the link for what i am after..
http://www.mmageardirect.com.au/tmp/index.htm
Not so easy but check this out: http://blog.themeforest.net/tutorials/vertical-centering-with-css/
Try using vertical-align: middle and a set of divs with display:table, table-row, table-cell.
I am using the CSSStickyFooter.com tutorial in my amateurishly imperfect attempt to get the perfect sticky footer working.
This is a specific question regarding the overflow:auto; style on the "main" div. With this in place, and when the window is narrowed by the user, I get a horizontal scrollbar halfway down my page. Can't this added scrollbar automatically appear at the bottom of the window like it's supposed to?
The reason you're getting the scrollbar in an odd place is because it is on the <div> rather than on the page. This is a result of using overflow:auto;.
overflow:auto; tells CSS that you want that particular <div> to get scrollbars (either horizontal or vertical) when it is too small to display all its content.
Therefore the direct answer to your question is No; you can't position the scrollbar elsewhere on the page, since it is attached to the <div>.
However, there may be ways around it.
Firstly, if you don't mind the content being clipped when the display is narrow, you can set the scrollbars such that it only gives you a horizontal one, and supresses the vertical one. You'd do that something like this:
overflow-y: scroll;
overflow-x: hidden;
Alternatively, there may be other ways to fix your code; CSSStickyFooter.com is quite well know, so if it works for others without this glitch, it can probably be made to work for you too. But we'd need to see a bit more of your code in order to help you further down that line.
I researched and tried many techniques for sticky footers and found this one to work great:
http://ryanfait.com/resources/footer-stick-to-bottom-of-page/
I had problems with many other techniques I used before that one. If using CSSStickyFooter.com is not a strict requirement for your project, I recommend you use the technique described in the link I referred to.