Question

I’ve employed two different scroll related effects(among other javascript) on one of my websites(KiirstinMarilyn.com) and they appear to be interfering with each other. They are as follows:

1. Center the logo and navigation on the screen while ensuring all content is below the fold.
2. The first jQuery effect makes clicking the nav links scroll smooth to the anchor text.
3. The second jquery effect, and what I added today, uses William Duffy’s method to keep the music player element in view while scrolling.
4. The last element is employing nivoZoom for the pictures.

The website is fine when the width of the browser window is more then 876px wide (which is the width of the main content 574px + the music player 302px). The problem occurs when the width of the browser is 876px or less. For some reason, when the browser is less then that amount wide the William Duffy scrolling method also effects the content and it scrolls down out of view.

I’ve searched trying to find both alternate methods to create the effect I desire while also looking for information as to certain components of these effects might be interfering. Unfortunately I haven’t found anything. That said, what I am thinking of doing as a last resort is disabling the scrolling effects if the width of the browser is less then 876px. It’s less then ideal so I hope you all can advise me as to where my errors are and point me in the direction to learn to fix them.

Thanks Kindly,
Chad

Answer 1

all you need is an edit to your CSS for the #scrollingDiv. If you change it to:

#scrollingDiv {
    position:absolute;
    right:20px;
    z-index:1;
    height: 10.4em;
    width: 30em;
    background: black;
    border: solid 1px #99083c;
}

I’d also suggest you change animating marginTop in Williams example to simply top. But the CCS fix should sort it.