本文介绍如何使用JavaScript和CSS实现仿京东风格的搜索栏，使其在页面滚动时背景透明度发生渐变。核心逻辑通过监听滚动事件，动态计算滚动条位置与最大高度的比例，并限制透明度上限为0.9。代码包含HTML结构、CSS样式及JS逻辑，特别强调了初始化设置的重要性以应对强制刷新场景。
实现概述与HTML结构
直接展示实现代码。
HTML结构部分
<header class="module-layer">
<div class="module-layer-content">
<div class="search-box-cover"></div>
<p class="layer-return"></p>
<h1 class="layer-head-name">
<div class="pr search-box">
<img class="shop-search" src="images/search.png"/>
<input id="shop-input" type="text" placeholder="搜索店内商品" value="" />
</div>
</h1>
<p class="layer-share"></p>
</div>
</header> 其中search-box-cover用于控制背景透明度的变化。
CSS样式部分
CSS样式设计
.module-layer {
width:100%;
position:fixed;
top:0;
left:0;
z-index:100000;
}
.module-layer-content {
position:relative;
min-width:320px;
max-width:750px;
width:100%;
margin:0 auto;
}
.module-layer-bg {
width:100%;
height:100%;
background:#000;
opacity:.7;
position:absolute;
top:0;
left:0;
z-index:-1;
}
.layer-head-name {
height:50px;
line-height:50px;
text-align:center;
padding:0 50px;
font-size:20px;
}
.layer-return,.layer-share {
width:50px;
height:50px;
line-height:50px;
text-align:center;
position:absolute;
top:0;
z-index:1;
}
.layer-return {
left:0;
}
.layer-share {
right:0;
}
.pr {
position:relative;
}
#shop-input::-webkit-input-placeholder {
color:#fff;
}
#shop-input:-moz-placeholder {
color:#fff;
}
#shop-input::-moz-placeholder {
color:#fff;
}
#shop-input:-ms-input-placeholder {
color:#fff;
}
#shop-input {
border:none;
outline:none;
background:transparent;
}
.search-box {
height:30px;
border-radius:20px;
top:10px;
overflow:hidden;
z-index:10;
}
.search-box:after {
content:'';
display:block;
width:100%;
height:30px;
background:#fff;
opacity:.5;
position:absolute;
top:0;
left:0px;
z-index:-1;
}
#shop-input {
height:28px;
line-height:28px;
font-size:16px;
position:absolute;
top:0;
left:30px;
} JavaScript逻辑部分
JavaScript逻辑实现
$(function(){
var $body = $('body');
var setCoverOpacity = function() {
$body.find('.search-box-cover').css({
opacity: ((($body.scrollTop() / 150) > 0.9) ? 0.9 : ($body.scrollTop() / 150))
})
}
//初始化设置背景透明度
setCoverOpacity();
//监听滚动条事件，改变透明度
$(window).scroll(function() {
setCoverOpacity();
});
})最终呈现效果如下。
关键注意事项与参数调整
注意事项：
需要特别注意的一点是：强制刷新会导致页面重新加载，此时动态添加的CSS样式可能暂时不存在。因此，对透明背景进行初始化设置至关重要，这能确保用户在网页端强制刷新时，依然能保持正确的透明效果。
具体实现细节：
((($body.scrollTop() / 150) > 0.9) ? 0.9 : ($body.scrollTop() / 150)) 上述三目表达式用于判断当前滚动条的位置。如果位置值除以150的结果大于0.9，则返回0.9；否则返回该小于等于0.9的值。将这个返回值设置为背景的透明度，即可实现渐变效果。
由于滚动条的位置是动态获取的，透明度的设置会随之不断改变，因此无需额外编写单独的渐变动画效果。
关于最终透明度的设定，京东在最终背景中设置为0.9，本案例也采用0.9作为上限，这样能获得更好的视觉体验。
若希望延长渐变发生的滚动距离，可以将公式中的150设置为更大的数值。
以上介绍了基于JavaScript实现仿京东搜索栏随滑动透明度渐变效果的方法，希望对大家有所帮助。如有任何疑问，欢迎留言，小编会及时回复。感谢大家对本站的支持！