0

Есть некий блок, который при скроле страницы зависает сверху, ему динамически добавляется класс с фиксированным положением.

var element = $(".top");

$(document).scroll(function(){
  if($(this).scrollTop() > element.position().top){
    element.addClass('intop');
  }else{
    element.removeClass('intop');
  }
});

После того как этот блок зафиксировался сверху, при кликах на якоря, контент "заезжает под него". При чем кликать на якоря можно как до так и после фиксации сверху блока. Можно ли как нибудь перехватить клик на анкор и переназначить позицию скрола, в зависимости от ситуации? И еще, как учесть то, что если анкор находится выше фиксируемого блока, а его контент ниже?

<div class="container">
    <ul>
      <li><a href="#id1">Якорь 1</a></li>
      <li><a href="#id2">Якорь 2</a></li>
      <li><a href="#id3">Якорь 3</a></li>
    </ul>

    <div class="top">
      <h1>{$offer->name}</h1>
      <ul>
        <li><a href="{some-link}">Купить</a></li>
        <li><a href="{some-link}">Гарантия</a></li>
        <li><a href="{some-link}">Доставка</a></li>
      </ul>
    </div>

    <div id="id1">
      {some-content}
    </div>

    <div id="id2">
      {some-content}
    </div>

    <div id="id3">
      {some-content}
    </div>
</div>
4
  • а хтмл запилить трудно было? 13 мар 2016 в 8:31
  • @Jean-Claude это как? каждому блоку с id добавить верхний отступ? 13 мар 2016 в 8:33
  • сюда добавить хтмл в реализацией вашей проблемы. 13 мар 2016 в 8:34
  • @Jean-Claude ну вот примерно вот так... 13 мар 2016 в 8:46

1 ответ 1

1

В общем решению взято из исходника https://babeljs.io/docs/learn-es2015/, но подходит только для фиксированного по высоте блока position: fixed (если конечно же знаете как выбрать div:target::before то..)

		$(function() {
		  var element = $(".top");

		  $('a[href*=#]').on('click', function(event) {
		    element.addClass('intop');
		  });

		  $(document).scroll(function() {
		    if ($(this).scrollTop() > element.position().top) {
		      element.addClass('intop');
		    } else {
		      element.removeClass('intop');
		    }
		  });
		});
		.intop {
		  background: tomato none repeat scroll 0 0;
		  position: fixed;
		  top: 0;
		}
		#id3 {
		  height: 2500px;
		}
		div:target::before {
		  content: "";
		  display: block;
		  height: 160px;
		  margin-top: -160px;
		  width: 1px;
		}
		
<script src="https://ajax.googleapis.com/ajax/libs/jquery/1.11.1/jquery.min.js"></script>
<div class="container">
  <ul>
    <li><a href="#id1">Якорь 1</a>
    </li>
    <li><a href="#id2">Якорь 2</a>
    </li>
    <li><a href="#id3">Якорь 3</a>
    </li>
  </ul>

  <div class="top">
    <h1>{$offer->name}</h1>
    <ul>
      <li><a href="{some-link}">Купить</a>
      </li>
      <li><a href="{some-link}">Гарантия</a>
      </li>
      <li><a href="{some-link}">Доставка</a>
      </li>
    </ul>
  </div>

  <ul>
    <li><a href="#id1">Якорь 1</a>
    </li>
    <li><a href="#id2">Якорь 2</a>
    </li>
    <li><a href="#id3">Якорь 3</a>
    </li>
    <li><a href="#id1">Якорь 1</a>
    </li>
    <li><a href="#id2">Якорь 2</a>
    </li>
    <li><a href="#id3">Якорь 3</a>
    </li>
    <li><a href="#id1">Якорь 1</a>
    </li>
    <li><a href="#id2">Якорь 2</a>
    </li>
    <li><a href="#id3">Якорь 3</a>
    </li>
    <li><a href="#id1">Якорь 1</a>
    </li>
    <li><a href="#id2">Якорь 2</a>
    </li>
    <li><a href="#id3">Якорь 3</a>
    </li>
  </ul>

  <div id="id1">
    {some-content 1} {some-content}{some-content}{some-content}
  </div>

  <div id="id2">
    {some-content 2} {some-content}{some-content}{some-content}
  </div>

  <div id="id3">
    {some-content 3} {some-content}{some-content}{some-content}
  </div>
</div>

4
  • не увидел решения вопроса. При клике на ссылку "Якорь 3", "div#id3" прячется за div.top. а нужно, что бы он скролился до div.top, а не был с ним на одной высоте. 13 мар 2016 в 9:17
  • хорошо, я понял, сейчас запилю, с таким выдавливанием из вас подробностей у вас будут проблемы с ответами вам)) 13 мар 2016 в 9:20
  • @СергейДеревянко добавил 13 мар 2016 в 11:31
  • там похоже но не то. Там изначально есть фиксированный блок, а у меня он динамический. Решил остановить на том, что при фиксации блока, также буду вешать какой нибудь класс на body, и написать соответствующие стили под этот класс.. 13 мар 2016 в 11:57

Ваш ответ

By clicking “Отправить ответ”, you agree to our terms of service and acknowledge that you have read and understand our privacy policy and code of conduct.

Всё ещё ищете ответ? Посмотрите другие вопросы с метками или задайте свой вопрос.