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

html:

<div class="search">

    <a href="/index.php" ><img class="search-logo" id="search-logo" src="{$yf_theme_path}public/images/logo.png" alt=""></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" alt="">

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

</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>

转载于:https://www.cnblogs.com/sqyambition/p/8491103.html

相关资源：JAVA上百实例源码以及开源项目