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>

原文地址：https://www.cnblogs.com/sqyambition/p/8491103.html

时间： 2024-10-09 17:09:49

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

iOS 顶部高斯模糊导航栏 + 页面内容穿越底部导航栏效果

(1)如果是使用系统导航栏则设置其translucent属性即可: [self.navigationController.navigationBar setBackgroundImage:[UIImage new] forBarMetrics:UIBarMetricsDefault]; self.navigationController.navigationBar.shadowImage = [UIImage new]; self.navigationController.navigationB

React实现顶部固定滑动式导航栏（导航条下拉一定像素时显示原导航栏样式）

摘要 基于react的框架开发一个顶部固定滑动式的酷炫导航栏,当导航栏置顶时,导航栏沉浸在背景图片里:当鼠标滑动滚轮时,导航栏固定滑动并展示下拉样式. HTML部分 相关技术栈:react.antd.react-router.详细的技术栈应用请参考官方文档的使用说明. * 展示主页App.jsx组件代码 import React from 'react'; import './App.css'; import { Link, Route } from 'react-router-dom'; im

可以固定的顶部的导航菜单简单实例代码

可以固定的顶部的导航菜单简单实例代码:固定于网页顶部的导航栏效果在当下网站比较流行,所谓的固定于网页的顶部一般来说并不是一直固定于顶部,而是在开始是位于某一个位置,当下拉滚动条使其到达顶部的时候才会固定在顶部,下面通过代码实例介绍一下如何实现此效果.代码如下: <!DOCTYPE html> <html> <head> <meta charset=" utf-8"> <meta name="author" con

iOS开发笔记13:顶部标签式导航栏及下拉分类菜单

当内容及分类较多时,往往采用顶部标签式导航栏,例如网易新闻客户端的顶部分类导航,最近刚好有这样的应用场景,参考网络上一些demo,实现了这种导航效果,记录一些要点. 效果图(由于视频转GIF掉帧,滑动和下拉动画显得比较生硬,刚发现quickTime可以直接录制手机视频,推荐一下,很方便) 1.顶部标签式导航栏 (1)实现思路 其实就是在上下两个UIScrollView上做文章,实现联动选择切换的效果. ①顶部标签导航栏topCategoryListScrollView加载显示分类数据,下方con

JS-特效 ～ 02. 屏幕滚动事件、 DTD、scroll、顶部悬浮导航、两侧跟随广告、返回顶部小火煎

ceil 向上取整 floor 向下取整 round 四舍五入 缓动动画 动画原理 = 盒子位置 + 步长 清除定时器 步长越来越小 盒子位置 = 盒子本身位置 + (目标位置-本身位置)/n(最好为10) 最后10像素容易 容易出现问题 所以要向上取整 400-396 = 4  4/10 = 0.4   四舍五入 = 0 400-396 = 4  4/10 = 0.4   四舍五入 = 0 要用定时器 先清除定时器 7.  offsetLest取值为四舍五入 8.  差值大于0的时候向上取整

html-v12.25+课堂小练习-布局左固定右自适应

存在一个问题就是当屏幕缩小至一定宽度的时候,边框栏会被挤开 1 body { 2 font-family: 'Amarante', cursive; 3 background: url(http://www.w3cplus.com/sites/default/files/bg_body.png) repeat; 5 } 6 7 .wrapper { 8 margin: 0 auto; 9 } 11 .header-wrapper{ 12 background-color: #BD9C8C; 13

js-滚动到指定位置导航栏固定顶部

最近整理一下之前做的一个项目,把滚动条动态固定顶部的代码整理出来和大家分享,上代码 1 <!DOCTYPE html> 2 <html> 3 <head> 4 <meta charset="UTF-8"> 5 <title>js滚动到指定位置导航栏固定顶部</title> 6 <style type="text/css"> 7 body{height: 2500px; margin:

固定顶部导航栏和左侧边栏滚动条为右下方的一类布局分析

在管理界面或者一些需要固定显示信息的界面,经常遇到这样的布局:顶部导航栏固定不动,左侧有一个侧边栏用来显示详细信息,右下侧为主要内容所在区域.如下图所示: 这是需要达到的目标效果.其中Header和SideNav部分之间用固定定位实现就可以了,但是MainContent部分右侧的scroll bar确实不太好处理,主要存在两个问题: - 按照普通的方式基本都会铺满右侧整个可视区域,这使得顶部的Header的右侧有了一个滚动条区域,这对于顶部固定这个效果反差太明显. - 第二个问题是,如果Main

如何将导航栏始终固定在窗口顶部

如何将导航栏始终固定在窗口顶部:在很多的网站导航栏或者类似于导航栏的一些功能一直能够固定在网页的顶部,就算是下拉滚动条也不会被窗口所遮挡,这样的功能往往非常的使用,下面就简单介绍一下如何实现此种功能.先看一段代码实例: <!DOCTYPE html> <html> <head> <meta charset="utf-8"> <meta name="author" content="http://www.