В twenty fifteen Сайдбар по умолчанию зафиксирован с левой стороны. Если мы убираем параметр fixed в позиции, то это все равно не позволяет ему двигаться вместе с прокруткой. Даже при установлении параметра absolute сайдбар в некоторых браузерах может «скакать».
Дело в том, что кроме стилей в 15 теме вордпресс есть еще функция, которая добавляет отступы и заново меняет параметр позиции пр прокрутке страницы.
Для того, чтобы убрать эти «скачки» и сменить параметр position нужно зайти в папку с темой. В коде убрать то, что относится к function resize(). Я пометил этот промежуток прочерками (55-67 строки):
1 2 3 4 5 6 7 8 9 10 11 12 13 14 15 16 17 18 19 20 21 22 23 24 25 26 27 28 29 30 31 32 33 34 35 36 37 38 39 40 41 42 43 44 45 46 47 48 49 50 51 52 53 54 55 56 57 58 59 60 61 62 63 64 65 66 67 68 69 70 71 72 73 74 75 76 77 78 79 80 81 82 83 84 85 86 87 88 89 90 91 92 93 94 95 96 97 98 99 100 101 102 103 104 105 106 107 108 109 110 111 112 113 114 115 116 117 118 119 120 121 122 123 124 125 126 127 128 129 130 131 132 | /* 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 ); |
0 Comments