Scrolling left column

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
Melody ScottAsked:
Who is Participating?
I wear a lot of hats...

"The solutions and answers provided on Experts Exchange have been extremely helpful to me over the last few years. I wear a lot of hats - Developer, Database Administrator, Help Desk, etc., so I know a lot of things but not a lot about one thing. Experts Exchange gives me answers from people who do know a lot about one thing, in a easy to use platform." -Todd S.

MrunalCommented:
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.
Melody ScottAuthor 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. :)
Melody ScottAuthor 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.
Your Guide to Achieving IT Business Success

The IT Service Excellence Tool Kit has best practices to keep your clients happy and business booming. Inside, you’ll find everything you need to increase client satisfaction and retention, become more competitive, and increase your overall success.

Melody ScottAuthor 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,
Slick812Commented:
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
Slick812Commented:
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;
Melody ScottAuthor 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?
Slick812Commented:
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.

Experts Exchange Solution brought to you by

Your issues matter to us.

Facing a tech roadblock? Get the help and guidance you need from experienced professionals who care. Ask your question anytime, anywhere, with no hassle.

Start your 7-day free trial
Melody ScottAuthor Commented:
Thanks very much, I'll work with this and let you know. :)
Melody ScottAuthor Commented:
Works perfectly, thanks!
It's more than this solution.Get answers and train to solve all your tech problems - anytime, anywhere.Try it for free Edge Out The Competitionfor your dream job with proven skills and certifications.Get started today Stand Outas the employee with proven skills.Start learning today for free Move Your Career Forwardwith certification training in the latest technologies.Start your trial today
JavaScript

From novice to tech pro — start learning today.