Блог

Главная - Вопросы по программированию - как поймать событие прокрутки, вызванное привязкой к хэш-бангу?

как поймать событие прокрутки, вызванное привязкой к хэш-бангу?

#javascript #jquery #html #scroll #anchor

Вопрос:

Мне просто интересно, есть ли лучший способ подойти к этому

Итак, допустим, у вас есть jump to ссылка с использованием тега привязки:

www.example.com/#about

открытие этой ссылки приведет к тому, что браузер автоматически перейдет к разделу с

<div id="about"></div>

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

Причина этого в том, что у меня есть fixed навигационное меню, которое использует 120px браузер.

С уважением,

Ответ №1:

AFAIK нет способа напрямую перехватить это поведение, т. е. с ним не связано событие, доступное пользователю. Вместо window.location.hash этого он становится доступным для вас. Вы можете найти связанный элемент и перейти к нему, как только страница загрузится.

например, что-то вроде:

 function jumpToElement(element, offset) {
  if (!offset) offset = 0;
  var verticalPos = element.offsetHeight;
  window.scrollTo(0, verticalPos   offset);
}
function jumpToHash(offset) {
  var hash = window.location.hash;
  // Do nothing if no hash exists
  if (typeof hash !== 'string' || !hash.length) return;
  var targetElement = document.getElementById(hash);
  // Do nothing if targetElement doesn't exist
  if (!targetElement) return;
  jumpToHash(targetElement, offset);
});
if (document.readyState === "complete") {
  jumpToHash(-120); // with 120px
} else {
  document.addEventListener("DOMContentLoaded", jumpToHash);
}

Комментарии:

1. помечено как ответ, потому что это правда, нет способа перехватить это поведение напрямую

Ответ №2:

Вы можете использовать scroll() метод jQuery. Событие прокрутки происходит, когда пользователь прокручивает указанный элемент, и оно работает для всех прокручиваемых элементов и объекта окна (окна браузера). scroll() Метод запускает событие прокрутки или присоединяет функцию для запуска при возникновении события прокрутки.

Запуск события прокрутки для выбранных элементов:

 $(selector).scroll()

Прикрепите функцию к событию прокрутки:

 $(selector).scroll(function)

Пример:

 var $titlebar = $( '.titlebar' ),
    fixedPosition = function() {
      var pos1 = $titlebar.offset().top,
          winTop = $( window ).scrollTop();
          $( window ).scrollTop( winTop   1 );
          var pos2 = $titlebar.offset().top;
          $( window ).scrollTop( winTop );
          return ( pos1 != pos2 )
    }(),
    titlebarHeight = fixedPosition ? $titlebar.outerHeight() : 0,
    $menu = $( '.nav a' );
        
$( '.nav a' ).click( function( e ) {
  var $target = $( this.hash );

  e.preventDefault();

  if ( !$( this ).hasClass( 'active' ) ) {
            $( 'html, body' ).stop( true, false ).animate( {
                'scrollTop': $target.offset().top - titlebarHeight
            }, 800 );
        }
    } );

$( window ).on( 'scroll', function() {
  didScroll = true
} );

setInterval( function() {
  if ( didScroll ) {
    didScroll = false;

    var scrollPos = $( document ).scrollTop(),
        windowHeight = ( $( window ).height() - titlebarHeight ) / 2;

        if ( fixedPosition ) {
          $menu.each( function( index ) {
            var $page = $( this.hash );

            if ( $page.position().top <= scrollPos   titlebarHeight   windowHeight ) {
              $( '.nav a.active' ).removeClass( 'active' );
              $menu.eq( index ).addClass( 'active' )
            }
          });
        }
  }
}, 150 ); 
 html,
body,
.contents,
.contents div {
  padding: 0;
  margin: 0;
  height: 100%
}
.titlebar {
  width: 100%;
  position: fixed;
  background-color: black
}
ul {
  padding: 0;
  margin: 0;
  list-style: none
}
.nav li {
  display: inline
}
.nav a {
  display: inline-block;
  padding: 1em;
  color: white;
  text-decoration: none;
  -webkit-transition-duration: .2s;
     -moz-transition-duration: .2s;
       -o-transition-duration: .2s;
          transition-duration: .2s
}
.nav a:hover {
  background-color: #555;
}
.nav a.active,
.nav a.active:hover{
    color: #69452d;
    background-color: #e1ba89;
    cursor: default
}
#home {
  padding: 4em 1em 1em;
  background-color: #b6946b
}
#features {
  padding: 1em;
  background-color: #e1ba89
}
#buy {
  padding: 1em;
  background-color: #ddd
}
#contact {
  padding: 1em;
  background-color: white
} 
 <script src="https://ajax.googleapis.com/ajax/libs/jquery/1.11.1/jquery.min.js"></script>
<div class="titlebar">
  <ul class="nav">
    <li><a href="#home" class="active">Home</a></li
    ><li><a href="#features">Features</a></li
    ><li><a href="#buy">Buy</a></li
    ><li><a href="#contact">Contact</a></li>
  </ul>
</div>
<div class="contents">
  <div id="home">Home</div>
  <div id="features">Features</div>
  <div id="buy">Buy</div>
  <div id="contact">Contact Us</div>
</div>
Метки: ,