Question

在滚动正文时，页脚应向上推页脚菜单。

我使用下面的代码实现了它，但在滚动时，页脚菜单会闪烁，因为额外的高度会添加到文档中。

如何解决此问题？

＆＃13;

$( document ).ready( function() {
	let footer         = $( '#footer' );
	let secondary_menu = $( '.menu-for-mobile' );

	$( window ).scroll( function() {
		if ( ( $( this ).scrollTop() + $( this ).height() ) >= footer.offset().top ) {
			if ( ! footer.hasClass( 'make-relative' ) ) {
				footer.addClass( 'make-relative' );
				secondary_menu.addClass( 'make-relative' );
			}
		} else {
			if ( footer.hasClass( 'make-relative' ) ) {
				footer.removeClass( 'make-relative' );
				secondary_menu.removeClass( 'make-relative' );
			}
		}
	});

});

＆＃13;

html, body {
  margin: 0;
  padding: 0;
}

.container {
  height: 200vh;
  background: lightblue;
}

.menu-for-mobile {
  position: fixed;
  bottom: 0;
  width: 100%;
  background: lightgreen;
  padding: 3rem;
  text-align: center;
}

.make-relative {
	position: relative;
}

#footer {
  padding: 6rem;
  text-align: center;
  background: tomato;
}

＆＃13;

<script src="https://ajax.googleapis.com/ajax/libs/jquery/2.1.1/jquery.min.js"></script>
<div class="container">
  
</div>
<div class="menu-for-mobile">
  Footer Menu
</div>
<div id="footer">
  Footer
</div>

＆＃13;

Answer 1

您可以通过将页脚菜单包装在另一个div中，并将其填充到菜单的高度来实现此目的。这样，文档中已经存在高度，并且没有闪烁。

或者，如果您不知道菜单的高度，可以动态添加填充。

粘滞的页脚从固定位置变为相对位置时闪烁

1 个答案: