25.当屏幕缩小的时候，固定顶部的导航栏的左右滚动

Posted 2020-10-25 小白纯

当屏幕缩小的时候，固定顶部的导航栏可以左右滚动

html:

<div class="search">

    <a href="/index.php" ><img class="search-logo" id="search-logo" src="{$yf_theme_path}public/images/logo.png" ></a>
    <div class="search-center" id="search-center">

         <a class="classify" id="classify"></a>
         <input name="keyword" type="text" class="search-text" placeholder="请输入搜索内容" value=""/>

         <a class="searchs"></a>
         <img src="/app/home/view/default/public/images/search.png" >

    </div>
    <img class="search-logo2" id="search-logo2" src="{$yf_theme_path}public/images/logo2.png" >

</div>

css:

.search{
height:108px;
margin: 0 auto;
border-bottom:1px solid #b0b0b0;
left:0px;
}
.search .search-logo{
float: left;
display:inline-block;
width:125px;
height:75px;
margin-top: 10px;
margin-left: 160px;
margin-bottom: 10px;
}
.search .search-center{
display: inline-block;
float: left;
width: 850px;
height:40px;
margin-left:10%;
margin-top: 20px;
position: relative;
margin-bottom: 10px;
}
.search .search-center .classify{
display: inline-block;
float: left;
height:40px;
width:60px;
/*background: red;*/
position: absolute;
top:0px;
left:0px;
cursor: pointer;
}
.search .search-center .search-text{
position: absolute;
top:3px;
left:62px;
height:37px;
width:708px;
border:1px solid #fff;
background: #fff;
}
:-moz-placeholder { /* Mozilla Firefox 4 to 18 */
color: #d3d3d3; opacity:1;
}

::-moz-placeholder { /* Mozilla Firefox 19+ */
color: #d3d3d3;opacity:1;
}

input:-ms-input-placeholder{
color: #d3d3d3;opacity:1;
}

input::-webkit-input-placeholder{
color: #d3d3d3;opacity:1;
}
.search .search-center .searchs{
display: inline-block;
position: absolute;
right: 0px;
width:80px;
height:40px;
cursor: pointer;
}
.search .search-p{
margin-top: 5px;
color:#b3b3b3;
cursor: pointer;
}
.search .search-p .search-span{
color:#E197A4;
margin:0 10px;
}
.search .search-logo2{
float:left;
display:inline-block;
width:83px;
height:108px;
margin-left:87px;
margin-top: 0;
}
@media screen and (max-width: 1500px){

#search-logo{
margin-left:30px;
}
#search-center{
margin-left:50px;
}
#search-logo2{
margin-left:50px;
}
}
@media screen and (max-width: 1180px){
#search-logo{
margin-left:0px;
}
#search-center{
margin-left:10px;
}
#search-logo2{
margin-left:0px;
}

}
.searchFixed{
background:#fff;
height:108px;
position: fixed;
z-index: 101;
width:1900px;
top:0;
border-bottom:1px solid #000;
}
.searchFixed .search-logo{
height: 75px;
margin-top: 10px;
}
.searchFixed .search-logo2{
height: 100px;
margin-top: 0;
}
.searchFixed .search-center{
margin-top: 27px;
}
.btn-default{
text-shadow: none;
}
.btn:focus, .btn:hover{
border:1px solid #DD2F2E;
color:#000;
}
.search-center .search-classify{
width:690px;
border:1px solid #e8e8e8;
position: absolute;
top:41px;
left:0px;
z-index: 104;
background: #fff;
display: none;
padding:5px 20px 20px 20px;
}
.search-classify p{
width:560px;
/*height:20px;*/
}
.search-classify p span{
cursor:pointer;
margin: 0 5px;
}
.search-classify p span:hover{
color:#E197A4;
}
.selected{
color:#E197A4;
}

js:

<script>

(function($){
$.ScrollFixed = function(el, options){
var base = this;
base.$el = $(el);
base.el = el;
var target = base.$el;
var original_left = parseInt(target.css(‘left‘));
var original_right = parseInt(target.css(‘right‘));
console.log("original_left:",original_left);

var _fix_position = function(){
if(base.options.fixed == ‘right‘){
target.css(‘right‘, ($(window).scrollLeft() + $(window).width() - $(document).width() + original_right) + ‘px‘);
} else if(base.options.fixed == ‘left‘){
target.css(‘left‘, (original_left - $(window).scrollLeft()) + ‘px‘);
}
};

var windowResize = function(){
_fix_position();
};

var windowScroll = function(){
_fix_position();
};

base.init = function(){
base.options = $.extend({}, $.ScrollFixed.defaultOptions, options);
$(window).resize(windowResize);
$(window).scroll(windowScroll);
_fix_position();
console.log(base.options.fixed);
};

base.init();
};

$.ScrollFixed.defaultOptions = {
fixed:‘left‘
};

$.fn.scrollFixed = function(options){
return this.each(function(){
(new $.ScrollFixed(this, options));
});
};
})(jQuery);

$(function(){
$(‘.search‘).scrollFixed({fixed:‘left‘});
})

</script>