Как при скролле задавать блоку отступ?

Question

[pashabomber]

Добрый день!

Есть страничка - dsd.volodin-web.ru/menu.html
Левая ее часть разбита на секции (день 1, день 2 и т.д.).
Слева зафиксировано меню дней с переходом на нужный день по клику. Так же в этом меню активный день получает класс active, когда мы доскроллили до этого дня.

Вот код меню:

<script>
	$(window).load(function(){
	// Cache selectors
	var lastId,
		topMenu = $("#top-menu"),
		topMenuHeight = topMenu.outerHeight()-102,
		// All list items
		menuItems = topMenu.find("a"),
		// Anchors corresponding to menu items
		scrollItems = menuItems.map(function(){
		  var item = $($(this).attr("href"));
		  if (item.length) { return item; }
		});
	// Bind click handler to menu items
	// so we can get a fancy scroll animation
	menuItems.click(function(e){
	  var href = $(this).attr("href"),
		  offsetTop = href === "#" ? 0 : $(href).offset().top-topMenuHeight+1;
	  $('html, body').stop().animate({ 
		  scrollTop: offsetTop
	  }, 900);
	  e.preventDefault();
	});
	// Bind to scroll
	$(window).scroll(function(){
	   // Get container scroll position
	   var fromTop = $(this).scrollTop()+topMenuHeight;	   
	   // Get id of current scroll item
	   var cur = scrollItems.map(function(){
		 if ($(this).offset().top < fromTop)
		   return this;
	   });
	   // Get the id of the current element
	   cur = cur[cur.length-1];
	   var id = cur && cur.length ? cur[0].id : "";	   
	   if (lastId !== id) {
		   lastId = id;
		   // Set/remove active class
		   menuItems
			 .parent().removeClass("active")
			 .end().filter("[href=#"+id+"]").parent().addClass("active");
	   }                   
	});
	});
	</script>

Задача следующая. Когда мы дошли до второго дня, меню дней уходит наверх настолько, чтобы 2й день был наверху экрана, а 1й день уходил за его пределы. Когда опускаемся на странице до 3го дня, то сверху уже 3й день, а 1-2 уходят за пределы. То есть чем ниже опускаемся, тем больше меню дней уходит за пределы экрана.

Я в JS не очень силен, решение с меню нашел в сети.

Как я себе представляю решение задачи. Находясь на первом дне для меню сверху задается отступ -30px. Находясь на втором дне - 60px. На третьем - 90px. Грубо говоря, берется определенное количество пикселей (число N), и при скролле до определенного блока меню дней задается margin: -(номер_блока*число_N)
Хотя может как по другому можно решить.

Заранее спасибо за помощь!

Answer 1

[Ivan Demidov]

Думал на коленке.

$(window).scroll(function(){
    ...
   var itemCurrent = menuItems.find('.active').index();
   var itemHeight = 30;
   topMenu.css({
      marginTop: -(itemCurrent * itemHeight)
   })                
  });

Comments

[pashabomber]

Добрый день!

Добавил в скрипт этот код, у списка появилось style="margin-top: 30px;", то есть значение не отрицательное, ну и не меняется при скролле цифра. Не поможете допилить эту штуку, а то я в JS не особо? :(

[Ivan Demidov]

$(window).scroll(function(){
    ...
   var itemCurrent = (topMenu.find('.active').index() == -1) ? 0 : topMenu.find('.active').index();
   var itemHeight = 30;
   topMenu.css({
      marginTop: -(itemCurrent * itemHeight)
   })                
  });

[pashabomber]

Ivan Demidov: супер! спасибо вам огромное!))