CODEWITHSUNDEEP
javascriptjqueryhtmlcss
Matthias Gies
Matthias Gies

Reputation: 115

Keep div on top when scrolling but keep margin

title is a little bit stupid. I have a page, probably full of errors. Either way, there's a Navi and a text box. Navi left, text box right.

Navi shall scroll up until it raches top of the window and then stay there. I got that to work so far. Copied and used codes I found, since I am a noob in Javascript.

Something happens to the text box though, just at the moment when the Navi changes from relative to fixed position. The text box ignores the Navi and just writes over it.

I had the Navi on fixed before I used the stick to top script and it all worked fine.

Here's the page: http://test.pluskat.de/StuckWeit/

Ignore background image.

What to do or what to change? I am totally confused myself by now with all the positioning. Please help. Remember I'm a noob in Javascript. I might be able to follow you, but please describe what is to be done, so others might be able to learn from it too.

Thank You. You guys are my last hope.

Upvotes: 0

Views: 1046

Answers (2)

Surya Narayan
Surya Narayan

Reputation: 558

To fix this issue you could try adding below style at the end of the style.css file.

#wrapper   
{
    width: 1024px; /*Add this if you have fixed width layout else ignore*/
    position: relative;
}

#textbox
{
    position: absolute;
    left: 220px;
    height: auto;
}

Upvotes: 1

emik
emik

Reputation: 953

This is how fixed position works: it takes the element out of the document flow. That's why your div occupies the whole width. You could try to add a class (i.e. "nav-positioned") to a common container element instead of changeing the position property in your JS. After you can style .nav-positioned .navi1 and .nav-positioned #Text

Upvotes: 0

Related Questions