Categories: Все о WordPress

Как избавиться от автоматического скроллинга сайдбара в 15 теме

В twenty fifteen Сайдбар по умолчанию зафиксирован с левой стороны. Если мы убираем параметр fixed в позиции, то это все равно не позволяет ему двигаться вместе с прокруткой. Даже при установлении параметра absolute сайдбар в некоторых браузерах может «скакать».

Дело в том, что кроме стилей в 15 теме вордпресс есть еще функция, которая добавляет отступы и заново меняет параметр позиции пр прокрутке страницы.
Для того, чтобы убрать эти «скачки» и сменить параметр position нужно зайти в папку с темой. В коде убрать то, что относится к function resize(). Я пометил этот промежуток прочерками (55-67 строки):

/* global screenReaderText *//**
 * Theme functions file.
 *
 * Contains handlers for navigation and widget area.
 */
( function( $ ) {
 var $body, $window, $sidebar, adminbarOffset, top = false,
     bottom = false, windowWidth, windowHeight, lastWindowPos = 0,
     topOffset = 0, bodyHeight, sidebarHeight, resizeTimer;

 // Add dropdown toggle that display child menu items.
 $( '.main-navigation .page_item_has_children > a, .main-navigation .menu-item-has-children > a' ).after( '<button class="dropdown-toggle" aria-expanded="false">' + screenReaderText.expand + '</button>' );

 $( '.dropdown-toggle' ).click( function( e ) {
  var _this = $( this );
  e.preventDefault();
  _this.toggleClass( 'toggle-on' );
  _this.next( '.children, .sub-menu' ).toggleClass( 'toggled-on' );
  _this.attr( 'aria-expanded', _this.attr( 'aria-expanded' ) === 'false' ? 'true' : 'false' );
  _this.html( _this.html() === screenReaderText.expand ? screenReaderText.collapse : screenReaderText.expand );
 } );

 // Enable menu toggle for small screens.
 ( function() {
  var secondary = $( '#secondary' ), button, menu, widgets, social;
  if ( ! secondary ) {
   return;
  }

  button = $( '.site-branding' ).find( '.secondary-toggle' );
  if ( ! button ) {
   return;
  }

  // Hide button if there are no widgets and the menus are missing or empty.
  menu    = secondary.find( '.nav-menu' );
  widgets = secondary.find( '#widget-area' );
  social  = secondary.find( '#social-navigation' );
  if ( ! widgets.length && ! social.length && ( ! menu || ! menu.children().length ) ) {
   button.hide();
   return;
  }

  button.on( 'click.twentyfifteen', function() {
   secondary.toggleClass( 'toggled-on' );
   secondary.trigger( 'resize' );
   $( this ).toggleClass( 'toggled-on' );
  } );
 } )();

 // Sidebar scrolling.
 ----------
function resize() {
  windowWidth   = $window.width();
  windowHeight  = $window.height();
  bodyHeight    = $body.height();
  sidebarHeight = $sidebar.height();

  if ( 955 > windowWidth ) {
   top = bottom = false;
   $sidebar.removeAttr( 'style' );
  }
 }
-------------
 function scroll() {
  var windowPos = $window.scrollTop();

  if ( 955 > windowWidth ) {
   return;
  }

  if ( sidebarHeight + adminbarOffset > windowHeight ) {
   if ( windowPos > lastWindowPos ) {
    if ( top ) {
     top = false;
     topOffset = ( $sidebar.offset().top > 0 ) ? $sidebar.offset().top - adminbarOffset : 0;
     $sidebar.attr( 'style', 'top: ' + topOffset + 'px;' );
    } else if ( ! bottom && windowPos + windowHeight > sidebarHeight + $sidebar.offset().top && sidebarHeight + adminbarOffset < bodyHeight ) {
     bottom = true;
     $sidebar.attr( 'style', 'position: fixed; bottom: 0;' );
    }
   } else if ( windowPos < lastWindowPos ) {
    if ( bottom ) {
     bottom = false;
     topOffset = ( $sidebar.offset().top > 0 ) ? $sidebar.offset().top - adminbarOffset : 0;
     $sidebar.attr( 'style', 'top: ' + topOffset + 'px;' );
    } else if ( ! top && windowPos + adminbarOffset < $sidebar.offset().top ) {
     top = true;
     $sidebar.attr( 'style', 'position: fixed;' );
    }
   } else {
    top = bottom = false;
    topOffset = ( $sidebar.offset().top > 0 ) ? $sidebar.offset().top - adminbarOffset : 0;
    $sidebar.attr( 'style', 'top: ' + topOffset + 'px;' );
   }
  } else if ( ! top ) {
   top = true;
   $sidebar.attr( 'style', 'position: fixed;' );
  }

  lastWindowPos = windowPos;
 }

 function resizeAndScroll() {
  resize();
  scroll();
 }

 $( document ).ready( function() {
  $body          = $( document.body );
  $window        = $( window );
  $sidebar       = $( '#sidebar' ).first();
  adminbarOffset = $body.is( '.admin-bar' ) ? $( '#wpadminbar' ).height() : 0;

  $window
   .on( 'scroll.twentyfifteen', scroll )
   .on( 'resize.twentyfifteen', function() {
    clearTimeout( resizeTimer );
    resizeTimer = setTimeout( resizeAndScroll, 500 );
   } );
  $sidebar.on( 'click keydown', 'button', resizeAndScroll );

  resizeAndScroll();

  for ( var i = 1; i < 6; i++ ) {
   setTimeout( resizeAndScroll, 100 * i );
  }
 } );

} )( jQuery );

 

veniamin

Recent Posts

Как заработать токен NOT за стейкинг BNB или FDUSD

Очень много разговоров в последнее время за токен NOT. Много бирж будут делать листинг токена,…

7 месяцев ago

Как заработать TON и NOT за стейкинг в телеграм

Телеграм недавно запустил возможность стейкать (замораживать) USDT и получать за это их валюту TON. Очень…

7 месяцев ago

Бонус 100 USDT +10 BUSD от Binance

Биржа криптовалют Binance проводит сейчас промо-акцию: новым пользователям дают ваучеры в сумме 110 долларов. Деньги…

3 года ago

Как парсить длительность видео youtube на php в привычном виде

Самый главный момент в работе с youtube - это получить ключ api через консоль разработчика…

3 года ago

Как удалить чужую сессию пользователя в ubuntu (linux)

Арендую сервер для небольшого проекта на python. И вот приходит мне уведомление, что за сутки…

3 года ago

Как наложить watermark на видео в python windows массово

Тестирую одну схему, и нужно на много видео наложить watermark. Решил делать через Python 3,…

3 года ago