I’m having some troubles with an element that I want to be fixed while scrolling down. I used position:fixed so it’s kind of working but some stuff is not as i want it. I want to stop a certain point of my page. I managed to make it start where i want but not stop…
Secondly and most importantly, is that I wanted to put an effect where the element doesnt direcrly comes down with you, but is a bit delayed.
So basically, when you scroll down the element follows you where you stopped in the page. I’ve seen that in couple of websites and it looks pretty good
I don’t know enough about CSS to help you, but I do know those who can are going to need to see examples and code. Do you have a url you can send us of this site? And do you have any code snippets you can put in your post?
What you describe sounds like a “Sticky” element.
There is a new css position value called sticky which makes it very easy to do, but browser support for it is not great just yet.
It has come up the forums before, so maybe do a search for “sticky header” or similar.
Try formatting your code by putting it in 3 backticks (```), it will make it easier for us to read. Can you post a screenshot of what it looks like? You can edit your post by clicking on the little pencil in the bottom right.
It should not make a difference what tool you use to create the code, it’s the browser that the people viewing the site are using which determines if position: sticky will work or not.
Here is an article about sticky.
To format your code above, place 3 backticks on a line of their own before and after the block of code:-
What didn’t work, the js method or the css?
It could be that you are using in-line styling, which you really shouldn’t be doing in this millennium.
Also you need to validate your code, I see a few obvious errors in there.
OMG haha it showed me 17errors and 6warnings! alright before getting back to the position:fixed issue i’d like to deal with the errors!
but if you have any ideas for that delayed scrolling thing please let me know!
I could not say without seeing the code that you tried. But I’m not a js expert, I have used position: sticky before, but only where non essential, so in the browsers which support it, it works, but in others, it falls back to position: static until those browsers catch up. @PaulOB is good with sticky elements, but I’m not sure if he’s around today.
My suspicion is that it’s the in-line styling causing problems. The js tries to change the css by switching the positioning to fixed. But in-line styling can be very difficult to override, so that may be interfering with the solution. I would recommend moving all your styling to an external style sheet, not just for this, but for a host of reasons.
Unless we can see the live page or a working demo of the code you are using it will be hard to offer much help I’m afraid.
I’ve looked through the thread but I’m not sure what you are after exactly. It sounds like a sticky header approach as Sam said but you don’t seem to mention header or footer so I wonder if you are after a ‘floating’ message bar of sorts. Here’s one from CSS tricks that follows down as you scroll.
In the end it will be a matter of finding the right script to do what you want unless you can write the whole thing yourself.