Scrolling left column

Melody Scott
Melody Scott used Ask the Experts™
on
Hi, thanks to an expert here, I've almost got what I need here: http://dev2.magickitchen.com/testimonials-homestyle.html

user name: pepe, pw: BobTheBuilder45!!

The left column starts to scroll at the right time, so I can still see the bottom item, Special Deals Page, while still seeing the top item, Gifts.

There are two problems I can't solve.

1. Once I start to scroll, there is a space above the words gift. I'd like to tighten that up. See screenshot space.jpg.
2. Depending on how far I scroll down the page, then scroll back up, the word Gifts might return to its proper place, or it might overlap the section above it, or there might be a big space. See screenshot gifts.jpg.

I've wrapped the part to scroll in <div id="scrollingDiv">, and the jquery is:
<script src="js/jquery-1.11.2.js"></script>

<script>
var $window = $(window);

function scrollMenu(){
  var pos = $window.scrollTop();
  if (pos > 255)
  $('#scrollingDiv').css('marginTop', (pos-290) + 'px');
}

$window.bind('scroll', scrollMenu);

</script>

Thanks, looking forward to your responses!
space.jpg
gifts.jpg
Comment
Watch Question

Do more with

Expert Office
EXPERT OFFICE® is a registered trademark of EXPERTS EXCHANGE®
Hi
For both the issues,
You have to check margin-top for div with id=scrollingDiv

You need to revisit your formula for margin-top.

Author

Commented:
Thanks...it's not my formula, it was supplied by another expert, so I'll do a litle research, but may return for help. :)

Author

Commented:
Ok, if I take this number up:  $('#scrollingDiv').css('marginTop', (pos-290) + 'px');

to 310, it does help. It scrolls down exactly as I want it to, without the space at the top.

However, when I scroll down and then back up, it covers the gray section Learn about this menu,

Can you help? Thanks.
Ensure you’re charging the right price for your IT

Do you wonder if your IT business is truly profitable or if you should raise your prices? Learn how to calculate your overhead burden using our free interactive tool and use it to determine the right price for your IT services. Start calculating Now!

Author

Commented:
Hi- the comments above are for: http://dev2.magickitchen.com/faq.html For http://dev2.magickitchen.com/testimonials-homestyle.html, which has the same code, the problem is different, in that it has a space when I scroll back up.

I will need this on pages with different lengths, so tried two pages,
greetings mel200,  OK,  you do not seem to understand what this code does, as it moves the menu by increasing the spacing of the margin above the menu items, the incorrect position is the result of scrolling quickly, and the math here -
 if (pos > 255)
  $('#scrollingDiv').css('marginTop', (pos-290) + 'px');

I told you before that the two number must be the same , mabe as -
 if (pos > 255)
  $('#scrollingDiv').css('marginTop', (pos-255) + 'px');

to eliminate the incorrect position that may happen in quick scrolling where the test of  -
      if (pos > 255)
does not get the position in time, you can add an  ELSE statement like so -
 if (pos > 255)
  $('#scrollingDiv').css('marginTop', (pos-255) + 'px');
  else
  $('#scrollingDiv').css('marginTop',  '0');

Open in new window


this is if the correct position is 255
I did not want to make this more complex with more code, , , , , but you can use javascript to obtain the relative position of the TOP position from -
 var sdTop =    $('#scrollingDiv').offset().top;

Author

Commented:
Hi, I tried it with the same number (did understand that part), but it wasn't working, I had the large gap. So I tried different numbers, which worked a little better.

As I clearly don't understand the script, would you be able to play with it and get it working, if I sent you the relevant files?
I have this code which works, , , ,  so the moving <div> ALWAYS ends up in the correct place when the scroll goes above the default position, which for my grid is 165px   -
function scrollMenu(){

  var pos = $window.scrollTop();

  if (pos > 165)
    $('#scrollingDiv').css('marginTop', (pos-165) + 'px');
    else
    $('#scrollingDiv').css('marginTop', '0');
  
}

Open in new window

Please notice that the two numbers are both  165   , and for my HTML grid, the 165 is the correct number. . . . .  .
As some code explanation,   the IF test as -
      if (pos > 165)
only starts and stops the <div> Movement on a scroll, and does NOTHING to place the position of the moving <div>   ...

this code -
        $('#scrollingDiv').css('marginTop', (pos-165) + 'px');
is what Changes the position of the <div> by increasing a top margin that pushes DOWN the div as the window is scrolled. It is necessary to Subtract the  default <div> window top position ( 165 in my code) from the amount of scroll pixels in  pos  so you do not have a space (gap) between the window top border and the top of the moving <div> on scroll movement.

IF the moving <div> has some graphic, title, or border that changes the display position a little, , , then I may decrease or increase, the number in ONLY the second code line, possibly as -
if (pos > 165)
    $('#scrollingDiv').css('marginTop', (pos-161) + 'px'); // decrease number here

which will then place the <div> 4 px lower Down from the top window border on scrolling. BUT the scroll move will still start and stop at the same position of       if (pos > 165)       because that is what works for that page set up.

Author

Commented:
Thanks very much, I'll work with this and let you know. :)

Author

Commented:
Works perfectly, thanks!

Do more with

Expert Office
Submit tech questions to Ask the Experts™ at any time to receive solutions, advice, and new ideas from leading industry professionals.

Start 7-Day Free Trial