【发布时间】：2018-07-18 07:37:11
【问题描述】：
我有一个使用 jQuery 的“粘性栏”实现：https://jsfiddle.net/mdyv740o/3/
<!DOCTYPE html>
<html>
<head>
<script src="jquery.min.js"></script>
<meta name="viewport" content="width=device-width, initial-scale=1">
<style>
body {
margin: 0;
font-family: Arial;
}
.top-container {
background-color: #f1f1f1;
padding: 30px;
text-align: center;
}
.header {
}
.content {
padding: 16px;
}
.sticky {
position: fixed;
top: 0;
width: 100%;
}
.sticky .sticky-body {
background: #555;
color: #f1f1f1;
padding: 10px 16px;
margin: 10px;
}
.sticky + .content {
padding-top: 90px;
}
</style>
</head>
<body>
<div class="top-container">
<h1>My Sticky Bar Demo</h1>
<p>Scroll down to see the sticky effect....</p>
</div>
<div class="header" id="myHeader">
<button type="button">Button 1</button>
<button type="button">Button 2</button>
<button type="button">Button 3</button>
<button type="button">Button 4</button>
<button type="button">Button 5</button>
</div>
<div class="content">
<h3>On Scroll Sticky Header</h3>
<p>The header will stick to the top when you reach its scroll position.</p>
<p>Scroll back up to remove the sticky effect.</p>
<p>Some text to enable scrolling.. Lorem ipsum dolor sit amet, illum definitiones no quo,
maluisset concludaturque et eum, altera fabulas ut quo. Atqui causae gloriatur ius te, id agam
omnis evertitur eum. Affert laboramus repudiandae nec et. Inciderint efficiantur his ad. Eum no
molestiae voluptatibus.</p>
<p>Some text to enable scrolling.. Lorem ipsum dolor sit amet, illum definitiones no quo,
maluisset concludaturque et eum, altera fabulas ut quo. Atqui causae gloriatur ius te, id agam
omnis evertitur eum. Affert laboramus repudiandae nec et. Inciderint efficiantur his ad. Eum no
molestiae voluptatibus.</p>
<p>Some text to enable scrolling.. Lorem ipsum dolor sit amet, illum definitiones no quo,
maluisset concludaturque et eum, altera fabulas ut quo. Atqui causae gloriatur ius te, id agam
omnis evertitur eum. Affert laboramus repudiandae nec et. Inciderint efficiantur his ad. Eum no
molestiae voluptatibus.</p>
<p>Some text to enable scrolling.. Lorem ipsum dolor sit amet, illum definitiones no quo,
maluisset concludaturque et eum, altera fabulas ut quo. Atqui causae gloriatur ius te, id agam
omnis evertitur eum. Affert laboramus repudiandae nec et. Inciderint efficiantur his ad. Eum no
molestiae voluptatibus.</p>
<p>Some text to enable scrolling.. Lorem ipsum dolor sit amet, illum definitiones no quo,
maluisset concludaturque et eum, altera fabulas ut quo. Atqui causae gloriatur ius te, id agam
omnis evertitur eum. Affert laboramus repudiandae nec et. Inciderint efficiantur his ad. Eum no
molestiae voluptatibus.</p>
<p>Some text to enable scrolling.. Lorem ipsum dolor sit amet, illum definitiones no quo,
maluisset concludaturque et eum, altera fabulas ut quo. Atqui causae gloriatur ius te, id agam
omnis evertitur eum. Affert laboramus repudiandae nec et. Inciderint efficiantur his ad. Eum no
molestiae voluptatibus.</p>
<p>Some text to enable scrolling.. Lorem ipsum dolor sit amet, illum definitiones no quo,
maluisset concludaturque et eum, altera fabulas ut quo. Atqui causae gloriatur ius te, id agam
omnis evertitur eum. Affert laboramus repudiandae nec et. Inciderint efficiantur his ad. Eum no
molestiae voluptatibus.</p>
<p>Some text to enable scrolling.. Lorem ipsum dolor sit amet, illum definitiones no quo,
maluisset concludaturque et eum, altera fabulas ut quo. Atqui causae gloriatur ius te, id agam
omnis evertitur eum. Affert laboramus repudiandae nec et. Inciderint efficiantur his ad. Eum no
molestiae voluptatibus.</p>
<p>Some text to enable scrolling.. Lorem ipsum dolor sit amet, illum definitiones no quo,
maluisset concludaturque et eum, altera fabulas ut quo. Atqui causae gloriatur ius te, id agam
omnis evertitur eum. Affert laboramus repudiandae nec et. Inciderint efficiantur his ad. Eum no
molestiae voluptatibus.</p>
<p>Some text to enable scrolling.. Lorem ipsum dolor sit amet, illum definitiones no quo,
maluisset concludaturque et eum, altera fabulas ut quo. Atqui causae gloriatur ius te, id agam
omnis evertitur eum. Affert laboramus repudiandae nec et. Inciderint efficiantur his ad. Eum no
molestiae voluptatibus.</p>
<p>Some text to enable scrolling.. Lorem ipsum dolor sit amet, illum definitiones no quo,
maluisset concludaturque et eum, altera fabulas ut quo. Atqui causae gloriatur ius te, id agam
omnis evertitur eum. Affert laboramus repudiandae nec et. Inciderint efficiantur his ad. Eum no
molestiae voluptatibus.</p>
<p>Some text to enable scrolling.. Lorem ipsum dolor sit amet, illum definitiones no quo,
maluisset concludaturque et eum, altera fabulas ut quo. Atqui causae gloriatur ius te, id agam
omnis evertitur eum. Affert laboramus repudiandae nec et. Inciderint efficiantur his ad. Eum no
molestiae voluptatibus.</p>
<p>Some text to enable scrolling.. Lorem ipsum dolor sit amet, illum definitiones no quo,
maluisset concludaturque et eum, altera fabulas ut quo. Atqui causae gloriatur ius te, id agam
omnis evertitur eum. Affert laboramus repudiandae nec et. Inciderint efficiantur his ad. Eum no
molestiae voluptatibus.</p>
<p>Some text to enable scrolling.. Lorem ipsum dolor sit amet, illum definitiones no quo,
maluisset concludaturque et eum, altera fabulas ut quo. Atqui causae gloriatur ius te, id agam
omnis evertitur eum. Affert laboramus repudiandae nec et. Inciderint efficiantur his ad. Eum no
molestiae voluptatibus.</p>
<p>Some text to enable scrolling.. Lorem ipsum dolor sit amet, illum definitiones no quo,
maluisset concludaturque et eum, altera fabulas ut quo. Atqui causae gloriatur ius te, id agam
omnis evertitur eum. Affert laboramus repudiandae nec et. Inciderint efficiantur his ad. Eum no
molestiae voluptatibus.</p>
</div>
<script>
$(function () {
var $header = $("#myHeader");
$header.hide();
//wrap in div
var $body = $header.wrapInner("<div></div>").children().addClass("sticky-body");
var myFunction = function() {
var sticky = $header[0].offsetTop;
if (window.pageYOffset > sticky) {
$header.addClass("sticky").show();
} else {
$header.removeClass("sticky").hide();
}
};
$(window).on("scroll", myFunction);
});
</script>
</body>
</html>
基本上，当页面加载时，工具栏还没有显示。最终用户向下滚动一点，然后工具栏将可见，几乎位于屏幕顶部。工具栏保持可见，直到用户向上滚动，到达屏幕顶部附近。等等。
现在我的主管要求我用 React 重写它。而且根本没有 jQuery。我已经完成了所有的 UI 部分。我仍然无法弄清楚的是如何基于滚动使粘性条可见/不可见。如何做到这一点？
【问题讨论】：
标签： javascript reactjs