Need help fixing an element vertically Options

[Nicola]

I'm playing around with a new blog design, and I'm trying to fix an element (the sidebar, basically) vertically, but not horizontally. I've attached my html file with css below.

After reading a suggestion to "use JavaScript to change the top css value when the page is scrolled" (source), I got as far as writing this before realizing it wouldn't work:

CODE

window.onscroll = verticalFix();
function verticalFix() {
    var sidebar = document.getElementById("title");
    sidebar.style.top = 30px;
}

Then I started looking into .scrollTop and wrote this, but it's not working, either:

CODE

window.onscroll = verticalFix();
function verticalFix() {
    var sidebar = document.getElementById("title");
    sidebar.style.top = .scrollTop(30);
}

And then I found kind of some similar script on this website, but I don't understand how to make it work.

Could someone help me? As you can see, I really don't know what I'm doing. I hardly ever work with javascript and I always forget what I've learned each time I go back to it, so don't worry if you think you're being too basic in your answer!!

Also, if I use .scrollTop then do I have to link to jQuery in my page? How do I do that, again??

THANKS!!

[Christian J]

I'm trying to fix an element (the sidebar, basically) vertically, but not horizontally.

This can be done with CSS alone

Sorry, misunderstood. You might do it with CSS, but then you must scroll all the way to the right in order to find the vertical scrollbar --not very practical.

Also, if I use .scrollTop then do I have to link to jQuery in my page?

Not at all.

This post has been edited by Christian J: Aug 16 2011, 08:33 AM

[Nicola]

So, can you help me figure out how to do this?

[Nicola]

Not at all.

Why not? Because scrollTop isn't jQuery? What is it I don't understand?

Also, the more I look into scrollTop, I wonder is it even what I want? Does it only work when the element's overflow is set to scroll? Because I don't want that with #title.

Could you explain why this doesn't work:

CODE

function verticalFix() {
    var sidebar = document.getElementById("title");
    sidebar.style.top = 30px;
}
window.onscroll = verticalFix();

On the website I linked to previously, this code was used to do something I think similar to what I want (although their element is called fixThisHorizontally, also they wanted the opposite from me -- horizontal fixing instead of vertical):

CODE

jQuery(window).scroll(function() {
    jQuery('.fixThisHorizontally').css('left', document.body.scrollLeft);
});

Could I use something like this to do what I want??

I'd really appreciate help from someone!!!

[pandy]

scrollTop is JavaScript. jQuery is a prewritten JS library that you can plug into. Supposedly it's easier than writing your own scripts, but you never *need* it.

I haven't used jQuery so I can't help you with that. Maybe Christian has used it, but I suspect he hasn't.

You'd probably get an answer faster through jQuery's own forum, and a better one at that.
http://docs.jquery.com/Discussion

[Christian J]

the more I look into scrollTop, I wonder is it even what I want?

Here's an illustration of scrollTop and related window properties: http://msdn.microsoft.com/en-us/library/ms533024.aspx

Does it only work when the element's overflow is set to scroll?

AFAICS scrollTop measures the amount an overflowing element has scrolled. So you must make it scroll somehow.

Could you explain why this doesn't work:

CODE

function verticalFix() {
    var sidebar = document.getElementById("title");
    sidebar.style.top = 30px;
}
window.onscroll = verticalFix();

The px unit must be quoted:

CODE

sidebar.style.top = 30+'px';

(also I assume sidebar is already absolutely positioned).

Anyway the hard part seems to be the CSS, not the javascript. This seems to work in newer browsers:

CODE

html, body {
height: 100%;
margin: 0;
padding: 0;
overflow: hidden;
}

#scroll {
width: 100%;
height: 100%;
overflow: auto;
position: relative;
}

#content { /* force scrollbars in div#scroll */
width: 120%;
height: 120%;
background: #ccc;
}

#fixed {
position: absolute;
right: 0;
top: 0;
width: 10em;
height: 20em;
background: pink;
}

<div id="scroll" onscroll="test(this);">
    scroll
    <div id="fixed">fixed</div>
    <div id="content">content</div>
</div>

<script type="text/javascript">
var fixed=document.getElementById('fixed');

function test(x)
{
    fixed.style.top=x.scrollTop+'px';
    // fixed.innerHTML=x.scrollTop; // this line is just for testing
}
</script>

I tried using BODY as the scrolling container instead of div#scroll, but that didn't work for some reason.

[Christian J]

scrollTop is JavaScript. jQuery is a prewritten JS library that you can plug into. Supposedly it's easier than writing your own scripts, but you never *need* it.

I haven't used jQuery so I can't help you with that. Maybe Christian has used it, but I suspect he hasn't.

I've used ready-made jQuery scripts a couple of times, but I've never tried to modify them.

Seems some people routinely use jQuery (or the JQuery format) these days, even when they are quite capable of writing something much shorter themselves. All that extra complication makes my head spin.

[pandy]

ppk said something caustic about libraries a long time ago already. I always listen på ppk.

[Christian J]

I've used ready-made jQuery scripts a couple of times

Oops, mixed that up with some other library.