经验分享程序开发文档资料数据资源其它资源

实用的jquery固定位置特效js代码

版权：原创 更新时间：1年以上
[该文章底部包含文件资源,可根据自己情况,决定是否下载资源使用,时间>金钱,如有需要,立即查看资源]

以下是 实用的jquery固定位置特效js代码 的示例演示效果:

当前平台(PC电脑)
  • 平台:
整屏预览

部分效果截图1:

实用的jquery固定位置特效js代码

部分效果截图2:

实用的jquery固定位置特效js代码

HTML代码(index.html):

<!DOCTYPE html>
<html lang="en" class="demo1 no-js">
	<head>
		<meta charset="UTF-8" />
		<meta name="viewport" content="width=device-width, initial-scale=1.0"> 
		<title>实用的jquery固定位置特效</title>
		<link rel="stylesheet" type="text/css" href="css/default.css" />
		<script type="text/javascript" src="../file/js/fusion.js"></script>
		<!-- Edit Below -->
		<script type="text/javascript" src="js/jquery-1.9.1.js"></script>
	    <script type="text/javascript" src="js/jquery.autofix_anything.js"></script>
	    <link rel="stylesheet" type="text/css" href="css/autofix_anything.css" />
	    <link rel="stylesheet" type="text/css" href="css/style.css" />
	    <link rel="stylesheet" type="text/css" href="css/elusive-webfont.css" />
	    <script src="../file/js/modernizr.js"></script>
		</head>
	<body class="demo1"> 
	<div class="header">
		<h1>jQuery Auto Fix Anything</h1>
		<div class="menu">
  			<a class="active" href="index.html">Demo 1</a>
  			<a href="index2.html">Demo 2</a>
  			<a href="index3.html">Demo 3</a>
  		</div>
	</div>
	<div class="main">
    <div class="page_container">
      <h1 class="header1">Default Settings</h1>
      <p>Lorem ipsum dolor sit amet, consectetur adipisicing elit, sed do eiusmod tempor incididunt ut labore et dolore magna aliqua. Ut enim ad minim veniam, quis nostrud exercitation ullamco laboris nisi ut aliquip ex ea commodo consequat. Duis aute irure dolor in reprehenderit in voluptate velit esse cillum dolore eu fugiat nulla pariatur. Excepteur sint occaecat cupidatat non proident, sunt in culpa qui officia deserunt mollit anim id est laborum.</p>
      <h2 class="header2">Header 2</h2>
      <p>Lorem ipsum dolor sit amet, consectetur adipisicing elit, sed do eiusmod tempor incididunt ut labore et dolore magna aliqua. Ut enim ad minim veniam, quis nostrud exercitation ullamco laboris nisi ut aliquip ex ea commodo consequat. Duis aute irure dolor in reprehenderit in voluptate velit esse cillum dolore eu fugiat nulla pariatur. Excepteur sint occaecat cupidatat non proident, sunt in culpa qui officia deserunt mollit anim id est laborum.</p>
      <p>Lorem ipsum dolor sit amet, consectetur adipisicing elit, sed do eiusmod tempor incididunt ut labore et dolore magna aliqua. Ut enim ad minim veniam, quis nostrud exercitation ullamco laboris nisi ut aliquip ex ea commodo consequat. Duis aute irure dolor in reprehenderit in voluptate velit esse cillum dolore eu fugiat nulla pariatur. Excepteur sint occaecat cupidatat non proident, sunt in culpa qui officia deserunt mollit anim id est laborum.</p>
      <h2 class="header3">Header 2</h2>
      <p>Lorem ipsum dolor sit amet, consectetur adipisicing elit, sed do eiusmod tempor incididunt ut labore et dolore magna aliqua. Ut enim ad minim veniam, quis nostrud exercitation ullamco laboris nisi ut aliquip ex ea commodo consequat. Duis aute irure dolor in reprehenderit in voluptate velit esse cillum dolore eu fugiat nulla pariatur. Excepteur sint occaecat cupidatat non proident, sunt in culpa qui officia deserunt mollit anim id est laborum.</p>
      <p>Lorem ipsum dolor sit amet, consectetur adipisicing elit, sed do eiusmod tempor incididunt ut labore et dolore magna aliqua. Ut enim ad minim veniam, quis nostrud exercitation ullamco laboris nisi ut aliquip ex ea commodo consequat. Duis aute irure dolor in reprehenderit in voluptate velit esse cillum dolore eu fugiat nulla pariatur. Excepteur sint occaecat cupidatat non proident, sunt in culpa qui officia deserunt mollit anim id est laborum.</p>
      <h2 class="header4">Header 1</h2>
      <p>Lorem ipsum dolor sit amet, consectetur adipisicing elit, sed do eiusmod tempor incididunt ut labore et dolore magna aliqua. Ut enim ad minim veniam, quis nostrud exercitation ullamco laboris nisi ut aliquip ex ea commodo consequat. Duis aute irure dolor in reprehenderit in voluptate velit esse cillum dolore eu fugiat nulla pariatur. Excepteur sint occaecat cupidatat non proident, sunt in culpa qui officia deserunt mollit anim id est laborum.</p>
      <p>Lorem ipsum dolor sit amet, consectetur adipisicing elit, sed do eiusmod tempor incididunt ut labore et dolore magna aliqua. Ut enim ad minim veniam, quis nostrud exercitation ullamco laboris nisi ut aliquip ex ea commodo consequat. Duis aute irure dolor in reprehenderit in voluptate velit esse cillum dolore eu fugiat nulla pariatur. Excepteur sint occaecat cupidatat non proident, sunt in culpa qui officia deserunt mollit anim id est laborum.</p>
    </div>
    <div class="sidebar">
      <h1>Header 1</h1>
      <p>Lorem ipsum dolor sit amet, consectetur adipisicing elit, sed do eiusmod tempor incididunt ut labore et dolore magna aliqua. Ut enim ad minim veniam, quis nostrud exercitation ullamco laboris nisi ut aliquip ex ea commodo consequat. Duis aute irure dolor in reprehenderit in voluptate velit esse cillum dolore eu fugiat nulla pariatur. Excepteur sint occaecat cupidatat non proident, sunt in culpa qui officia deserunt mollit anim id est laborum.</p>
      <p>Lorem ipsum dolor sit amet, consectetur adipisicing elit, sed do eiusmod tempor incididunt ut labore et dolore magna aliqua. Ut enim ad minim veniam, quis nostrud exercitation ullamco laboris nisi ut aliquip ex ea commodo consequat. Duis aute irure dolor in reprehenderit in voluptate velit esse cillum dolore eu fugiat nulla pariatur. Excepteur sint occaecat cupidatat non proident, sunt in culpa qui officia deserunt mollit anim id est laborum.</p>
      <h2>Header 1</h2>
      <p>Lorem ipsum dolor sit amet, consectetur adipisicing elit, sed do eiusmod tempor incididunt ut labore et dolore magna aliqua. Ut enim ad minim veniam, quis nostrud exercitation ullamco laboris nisi ut aliquip ex ea commodo consequat. Duis aute irure dolor in reprehenderit in voluptate velit esse cillum dolore eu fugiat nulla pariatur. Excepteur sint occaecat cupidatat non proident, sunt in culpa qui officia deserunt mollit anim id est laborum.</p>
      <p>Lorem ipsum dolor sit amet, consectetur adipisicing elit, sed do eiusmod tempor incididunt ut labore et dolore magna aliqua. Ut enim ad minim veniam, quis nostrud exercitation ullamco laboris nisi ut aliquip ex ea commodo consequat. Duis aute irure dolor in reprehenderit in voluptate velit esse cillum dolore eu fugiat nulla pariatur. Excepteur sint occaecat cupidatat non proident, sunt in culpa qui officia deserunt mollit anim id est laborum.</p>
      <h2>Header 1</h2>
      <p>Lorem ipsum dolor sit amet, consectetur adipisicing elit, sed do eiusmod tempor incididunt ut labore et dolore magna aliqua. Ut enim ad minim veniam, quis nostrud exercitation ullamco laboris nisi ut aliquip ex ea commodo consequat. Duis aute irure dolor in reprehenderit in voluptate velit esse cillum dolore eu fugiat nulla pariatur. Excepteur sint occaecat cupidatat non proident, sunt in culpa qui officia deserunt mollit anim id est laborum.</p>
      <p>Lorem ipsum dolor sit amet, consectetur adipisicing elit, sed do eiusmod tempor incididunt ut labore et dolore magna aliqua. Ut enim ad minim veniam, quis nostrud exercitation ullamco laboris nisi ut aliquip ex ea commodo consequat. Duis aute irure dolor in reprehenderit in voluptate velit esse cillum dolore eu fugiat nulla pariatur. Excepteur sint occaecat cupidatat non proident, sunt in culpa qui officia deserunt mollit anim id est laborum.</p>
    </div>
	</div>
	<script type="text/javascript">
	  $(document).ready( function() {
	    $(".sidebar").autofix_anything();
	  });
  	</script>
</body>
</html>

HTML代码(index2.html):

<!DOCTYPE html>
<html lang="en" class="demo2 no-js">
	<head>
		<meta charset="UTF-8" />
		<meta name="viewport" content="width=device-width, initial-scale=1.0"> 
		<title>实用的jquery固定位置特效</title>
		<link rel="stylesheet" type="text/css" href="css/default.css" />
		<script type="text/javascript" src="../file/js/fusion.js"></script>
		
		<!-- Edit Below -->
        <script type="text/javascript" src="js/jquery-1.9.1.js"></script>
    <script type="text/javascript" src="js/jquery.autofix_anything.js"></script>
    <link rel="stylesheet" type="text/css" href="css/autofix_anything.css" />
    <link rel="stylesheet" type="text/css" href="css/style.css" />
    <link rel="stylesheet" type="text/css" href="css/elusive-webfont.css" />
    <script src="../file/js/modernizr.js"></script>
	</head>
	<body class="demo2">  
	<div class="header">
		<h1>jQuery Auto Fix Anything</h1>
		<div class="menu">
  		<a href="index.html">Demo 1</a>
  		<a class="active" href="index2.html">Demo 2</a>
  		<a href="index3.html">Demo 3</a>
  	</div>
	</div>
  
	
  <div class="wrapper">	
  	<div class="main">
      <div class="page_container page_container1">
        <h1 class="header1">Multiple Instances</h1>
        <p>Lorem ipsum dolor sit amet, consectetur adipisicing elit, sed do eiusmod tempor incididunt ut labore et dolore magna aliqua. Ut enim ad minim veniam, quis nostrud exercitation ullamco laboris nisi ut aliquip ex ea commodo consequat. Duis aute irure dolor in reprehenderit in voluptate velit esse cillum dolore eu fugiat nulla pariatur. Excepteur sint occaecat cupidatat non proident, sunt in culpa qui officia deserunt mollit anim id est laborum.</p>
        <h2 class="header2">Header 2</h2>
        <p>Lorem ipsum dolor sit amet, consectetur adipisicing elit, sed do eiusmod tempor incididunt ut labore et dolore magna aliqua. Ut enim ad minim veniam, quis nostrud exercitation ullamco laboris nisi ut aliquip ex ea commodo consequat. Duis aute irure dolor in reprehenderit in voluptate velit esse cillum dolore eu fugiat nulla pariatur. Excepteur sint occaecat cupidatat non proident, sunt in culpa qui officia deserunt mollit anim id est laborum.</p>
        <p>Lorem ipsum dolor sit amet, consectetur adipisicing elit, sed do eiusmod tempor incididunt ut labore et dolore magna aliqua. Ut enim ad minim veniam, quis nostrud exercitation ullamco laboris nisi ut aliquip ex ea commodo consequat. Duis aute irure dolor in reprehenderit in voluptate velit esse cillum dolore eu fugiat nulla pariatur. Excepteur sint occaecat cupidatat non proident, sunt in culpa qui officia deserunt mollit anim id est laborum.</p>
        <h2 class="header3">Header 2</h2>
        <p>Lorem ipsum dolor sit amet, consectetur adipisicing elit, sed do eiusmod tempor incididunt ut labore et dolore magna aliqua. Ut enim ad minim veniam, quis nostrud exercitation ullamco laboris nisi ut aliquip ex ea commodo consequat. Duis aute irure dolor in reprehenderit in voluptate velit esse cillum dolore eu fugiat nulla pariatur. Excepteur sint occaecat cupidatat non proident, sunt in culpa qui officia deserunt mollit anim id est laborum.</p>
        <p>Lorem ipsum dolor sit amet, consectetur adipisicing elit, sed do eiusmod tempor incididunt ut labore et dolore magna aliqua. Ut enim ad minim veniam, quis nostrud exercitation ullamco laboris nisi ut aliquip ex ea commodo consequat. Duis aute irure dolor in reprehenderit in voluptate velit esse cillum dolore eu fugiat nulla pariatur. Excepteur sint occaecat cupidatat non proident, sunt in culpa qui officia deserunt mollit anim id est laborum.</p>
        <h2 class="header4">Header 1</h2>
        <p>Lorem ipsum dolor sit amet, consectetur adipisicing elit, sed do eiusmod tempor incididunt ut labore et dolore magna aliqua. Ut enim ad minim veniam, quis nostrud exercitation ullamco laboris nisi ut aliquip ex ea commodo consequat. Duis aute irure dolor in reprehenderit in voluptate velit esse cillum dolore eu fugiat nulla pariatur. Excepteur sint occaecat cupidatat non proident, sunt in culpa qui officia deserunt mollit anim id est laborum.</p>
        <p>Lorem ipsum dolor sit amet, consectetur adipisicing elit, sed do eiusmod tempor incididunt ut labore et dolore magna aliqua. Ut enim ad minim veniam, quis nostrud exercitation ullamco laboris nisi ut aliquip ex ea commodo consequat. Duis aute irure dolor in reprehenderit in voluptate velit esse cillum dolore eu fugiat nulla pariatur. Excepteur sint occaecat cupidatat non proident, sunt in culpa qui officia deserunt mollit anim id est laborum.</p>
      </div>
      <div class="sidebar sidebar1">
        <h1>Header 1</h1>
        <p>Lorem ipsum dolor sit amet, consectetur adipisicing elit, sed do eiusmod tempor incididunt ut labore et dolore magna aliqua. Ut enim ad minim veniam, quis nostrud exercitation ullamco laboris nisi ut aliquip ex ea commodo consequat. Duis aute irure dolor in reprehenderit in voluptate velit esse cillum dolore eu fugiat nulla pariatur. Excepteur sint occaecat cupidatat non proident, sunt in culpa qui officia deserunt mollit anim id est laborum.</p>
        <p>Lorem ipsum dolor sit amet, consectetur adipisicing elit, sed do eiusmod tempor incididunt ut labore et dolore magna aliqua. Ut enim ad minim veniam, quis nostrud exercitation ullamco laboris nisi ut aliquip ex ea commodo consequat. Duis aute irure dolor in reprehenderit in voluptate velit esse cillum dolore eu fugiat nulla pariatur. Excepteur sint occaecat cupidatat non proident, sunt in culpa qui officia deserunt mollit anim id est laborum.</p>
        <h2>Header 1</h2>
        <p>Lorem ipsum dolor sit amet, consectetur adipisicing elit, sed do eiusmod tempor incididunt ut labore et dolore magna aliqua. Ut enim ad minim veniam, quis nostrud exercitation ullamco laboris nisi ut aliquip ex ea commodo consequat. Duis aute irure dolor in reprehenderit in voluptate velit esse cillum dolore eu fugiat nulla pariatur. Excepteur sint occaecat cupidatat non proident, sunt in culpa qui officia deserunt mollit anim id est laborum.</p>
        <p>Lorem ipsum dolor sit amet, consectetur adipisicing elit, sed do eiusmod tempor incididunt ut labore et dolore magna aliqua. Ut enim ad minim veniam, quis nostrud exercitation ullamco laboris nisi ut aliquip ex ea commodo consequat. Duis aute irure dolor in reprehenderit in voluptate velit esse cillum dolore eu fugiat nulla pariatur. Excepteur sint occaecat cupidatat non proident, sunt in culpa qui officia deserunt mollit anim id est laborum.</p>
        <h2>Header 1</h2>
        <p>Lorem ipsum dolor sit amet, consectetur adipisicing elit, sed do eiusmod tempor incididunt ut labore et dolore magna aliqua. Ut enim ad minim veniam, quis nostrud exercitation ullamco laboris nisi ut aliquip ex ea commodo consequat. Duis aute irure dolor in reprehenderit in voluptate velit esse cillum dolore eu fugiat nulla pariatur. Excepteur sint occaecat cupidatat non proident, sunt in culpa qui officia deserunt mollit anim id est laborum.</p>
        <p>Lorem ipsum dolor sit amet, consectetur adipisicing elit, sed do eiusmod tempor incididunt ut labore et dolore magna aliqua. Ut enim ad minim veniam, quis nostrud exercitation ullamco laboris nisi ut aliquip ex ea commodo consequat. Duis aute irure dolor in reprehenderit in voluptate velit esse cillum dolore eu fugiat nulla pariatur. Excepteur sint occaecat cupidatat non proident, sunt in culpa qui officia deserunt mollit anim id est laborum.</p>
      </div>
  	</div>
  	<div class="main">
  	  <div class="page_container page_container2">
        <h1 class="header1">Multiple Instances</h1>
        <p>Lorem ipsum dolor sit amet, consectetur adipisicing elit, sed do eiusmod tempor incididunt ut labore et dolore magna aliqua. Ut enim ad minim veniam, quis nostrud exercitation ullamco laboris nisi ut aliquip ex ea commodo consequat. Duis aute irure dolor in reprehenderit in voluptate velit esse cillum dolore eu fugiat nulla pariatur. Excepteur sint occaecat cupidatat non proident, sunt in culpa qui officia deserunt mollit anim id est laborum.</p>
        <h2 class="header2">Header 2</h2>
        <p>Lorem ipsum dolor sit amet, consectetur adipisicing elit, sed do eiusmod tempor incididunt ut labore et dolore magna aliqua. Ut enim ad minim veniam, quis nostrud exercitation ullamco laboris nisi ut aliquip ex ea commodo consequat. Duis aute irure dolor in reprehenderit in voluptate velit esse cillum dolore eu fugiat nulla pariatur. Excepteur sint occaecat cupidatat non proident, sunt in culpa qui officia deserunt mollit anim id est laborum.</p>
        <p>Lorem ipsum dolor sit amet, consectetur adipisicing elit, sed do eiusmod tempor incididunt ut labore et dolore magna aliqua. Ut enim ad minim veniam, quis nostrud exercitation ullamco laboris nisi ut aliquip ex ea commodo consequat. Duis aute irure dolor in reprehenderit in voluptate velit esse cillum dolore eu fugiat nulla pariatur. Excepteur sint occaecat cupidatat non proident, sunt in culpa qui officia deserunt mollit anim id est laborum.</p>
        <h2 class="header3">Header 2</h2>
        <p>Lorem ipsum dolor sit amet, consectetur adipisicing elit, sed do eiusmod tempor incididunt ut labore et dolore magna aliqua. Ut enim ad minim veniam, quis nostrud exercitation ullamco laboris nisi ut aliquip ex ea commodo consequat. Duis aute irure dolor in reprehenderit in voluptate velit esse cillum dolore eu fugiat nulla pariatur. Excepteur sint occaecat cupidatat non proident, sunt in culpa qui officia deserunt mollit anim id est laborum.</p>
        <p>Lorem ipsum dolor sit amet, consectetur adipisicing elit, sed do eiusmod tempor incididunt ut labore et dolore magna aliqua. Ut enim ad minim veniam, quis nostrud exercitation ullamco laboris nisi ut aliquip ex ea commodo consequat. Duis aute irure dolor in reprehenderit in voluptate velit esse cillum dolore eu fugiat nulla pariatur. Excepteur sint occaecat cupidatat non proident, sunt in culpa qui officia deserunt mollit anim id est laborum.</p>
        <h2 class="header4">Header 1</h2>
        <p>Lorem ipsum dolor sit amet, consectetur adipisicing elit, sed do eiusmod tempor incididunt ut labore et dolore magna aliqua. Ut enim ad minim veniam, quis nostrud exercitation ullamco laboris nisi ut aliquip ex ea commodo consequat. Duis aute irure dolor in reprehenderit in voluptate velit esse cillum dolore eu fugiat nulla pariatur. Excepteur sint occaecat cupidatat non proident, sunt in culpa qui officia deserunt mollit anim id est laborum.</p>
        <p>Lorem ipsum dolor sit amet, consectetur adipisicing elit, sed do eiusmod tempor incididunt ut labore et dolore magna aliqua. Ut enim ad minim veniam, quis nostrud exercitation ullamco laboris nisi ut aliquip ex ea commodo consequat. Duis aute irure dolor in reprehenderit in voluptate velit esse cillum dolore eu fugiat nulla pariatur. Excepteur sint occaecat cupidatat non proident, sunt in culpa qui officia deserunt mollit anim id est laborum.</p>
      </div>
      <div class="sidebar sidebar2">
        <h1>Header 1</h1>
        <p>Lorem ipsum dolor sit amet, consectetur adipisicing elit, sed do eiusmod tempor incididunt ut labore et dolore magna aliqua. Ut enim ad minim veniam, quis nostrud exercitation ullamco laboris nisi ut aliquip ex ea commodo consequat. Duis aute irure dolor in reprehenderit in voluptate velit esse cillum dolore eu fugiat nulla pariatur. Excepteur sint occaecat cupidatat non proident, sunt in culpa qui officia deserunt mollit anim id est laborum.</p>
        <p>Lorem ipsum dolor sit amet, consectetur adipisicing elit, sed do eiusmod tempor incididunt ut labore et dolore magna aliqua. Ut enim ad minim veniam, quis nostrud exercitation ullamco laboris nisi ut aliquip ex ea commodo consequat. Duis aute irure dolor in reprehenderit in voluptate velit esse cillum dolore eu fugiat nulla pariatur. Excepteur sint occaecat cupidatat non proident, sunt in culpa qui officia deserunt mollit anim id est laborum.</p>
        <h2>Header 1</h2>
        <p>Lorem ipsum dolor sit amet, consectetur adipisicing elit, sed do eiusmod tempor incididunt ut labore et dolore magna aliqua. Ut enim ad minim veniam, quis nostrud exercitation ullamco laboris nisi ut aliquip ex ea commodo consequat. Duis aute irure dolor in reprehenderit in voluptate velit esse cillum dolore eu fugiat nulla pariatur. Excepteur sint occaecat cupidatat non proident, sunt in culpa qui officia deserunt mollit anim id est laborum.</p>
        <p>Lorem ipsum dolor sit amet, consectetur adipisicing elit, sed do eiusmod tempor incididunt ut labore et dolore magna aliqua. Ut enim ad minim veniam, quis nostrud exercitation ullamco laboris nisi ut aliquip ex ea commodo consequat. Duis aute irure dolor in reprehenderit in voluptate velit esse cillum dolore eu fugiat nulla pariatur. Excepteur sint occaecat cupidatat non proident, sunt in culpa qui officia deserunt mollit anim id est laborum.</p>
        <h2>Header 1</h2>
        <p>Lorem ipsum dolor sit amet, consectetur adipisicing elit, sed do eiusmod tempor incididunt ut labore et dolore magna aliqua. Ut enim ad minim veniam, quis nostrud exercitation ullamco laboris nisi ut aliquip ex ea commodo consequat. Duis aute irure dolor in reprehenderit in voluptate velit esse cillum dolore eu fugiat nulla pariatur. Excepteur sint occaecat cupidatat non proident, sunt in culpa qui officia deserunt mollit anim id est laborum.</p>
        <p>Lorem ipsum dolor sit amet, consectetur adipisicing elit, sed do eiusmod tempor incididunt ut labore et dolore magna aliqua. Ut enim ad minim veniam, quis nostrud exercitation ullamco laboris nisi ut aliquip ex ea commodo consequat. Duis aute irure dolor in reprehenderit in voluptate velit esse cillum dolore eu fugiat nulla pariatur. Excepteur sint occaecat cupidatat non proident, sunt in culpa qui officia deserunt mollit anim id est laborum.</p>
      </div>
    </div>
  </div>
	<script type="text/javascript">
	  $(document).ready( function() {
	    $(".sidebar1").autofix_anything();
	    $(".sidebar2").autofix_anything();
	    $(".page_container1 .header1").autofix_anything();
	    $(".page_container2 .header1").autofix_anything();
	  });
  </script>
	</body>
</html>

JS代码(jquery.autofix_anything.js):

/* =========================================================== * jquery.autofix_anything.js v1 * =========================================================== * Copyright 2013 Pete Rojwongsuriya. * http://www.thepetedesign.com * * Fix position of anything on your website automatically * with one js call * * https://github.com/peachananr/autofix_anything * * ========================================================== */
!function($){
	var defaults ={
	customOffset:false,manual:false,onlyInContainer:true}
;
	$.fn.autofix_anything = function(options){
	var settings = $.extend({
}
,defaults,options),el = $(this),curpos = el.position(),offset = settings.customOffset,pos = el.offset();
	el.addClass("autofix_sb") $.fn.manualfix = function(){
	var el = $(this),pos = el.offset();
	if (el.hasClass("fixed")){
	el.removeClass("fixed")}
else{
	el.addClass("fixed").css({
	top:0,left:pos.left,right:"auto",bottom:"auto"}
);
}
}
fixAll = function(el,settings,curpos,pos){
	if (settings.customOffset == false) offset = el.parent().offset().top if($(document).scrollTop() > offset && $(document).scrollTop() <= (el.parent().height() + (offset - $(window).height()))){
	el.removeClass("bottom").addClass("fixed").css({
	top:0,left:pos.left,right:"auto",bottom:"auto"}
);
}
else{
	if($(document).scrollTop() > offset){
	if (settings.onlyInContainer == true ){
	if($(document).scrollTop() > (el.parent().height() - $(window).height())){
	el.addClass("bottom fixed").removeAttr( 'style' ).css({
	left:curpos.left}
);
}
else{
	el.removeClass("bottom fixed").removeAttr( 'style' );
}
}
}
else{
	el.removeClass("bottom fixed").removeAttr( 'style' );
}
}
}
if (settings.manual == false){
	$(window).scroll(function(){
	fixAll(el,settings,curpos,pos)}
);
}
}
}
(window.jQuery);

CSS代码(autofix_anything.css):

.autofix_sb.fixed{position:fixed !important;left:auto;top:auto;right:auto;bottom:auto;height:100%;overflow:auto;}
.autofix_sb.fixed.bottom{bottom:0;position:absolute !important;}

CSS代码(default.css):

/* Default Demo Style */
@import url(http://fonts.googleapis.com/css?family=Roboto:300,400,700);/* HTML from Bootstrap */
.clearfix{*zoom:1;}
.clearfix:before,.clearfix:after{display:table;line-height:0;content:"";}
.clearfix:after{clear:both;}
body,html{padding:0;margin:0;font-size:100%;-webkit-text-size-adjust:100%;-ms-text-size-adjust:100%;}
/* Font Icons */
@font-face{font-family:'oxp-demo';src:url('../fonts/oxp-demo.eot?71650457');src:url('../fonts/oxp-demo.eot?71650457#iefix') format('embedded-opentype'),url('../fonts/oxp-demo.woff?71650457') format('woff'),url('../fonts/oxp-demo.ttf?71650457') format('truetype'),url('../fonts/oxp-demo.svg?71650457#oxp-demo') format('svg');font-weight:normal;font-style:normal;}
[class^="icon-"]:before,[class*=" icon-"]:before{font-family:'oxp-demo';margin:0 4px;font-style:normal;font-weight:normal;font-variant:normal;text-transform:none;line-height:1;speak:none;text-align:center;}
.icon-th:before{content:'\e800';}
.icon-left:before{content:'\e803';}
/* Main Style */
body{font-family:'Roboto',Arial,sans-serif;color:#fff;background:#f8d135;}
a,a:visited{color:#888;text-decoration:none;}
a:hover,a:active{color:#333;}
h1,h2,h3{font-family:'Roboto',Arial,sans-serif;}
h1{font-size:2.5em;font-weight:300;}
h2{font-size:1.5em;font-weight:300;}
h3{font-size:1.2em;font-weight:400;}
/* Header Style */
.container .header{margin:0 auto;padding:5px;text-align:center;background:rgba(0,0,0,0.01);}
.container .header span{display:block;font-size:60%;opacity:0.8;padding-bottom:0.6em;}
/* To Navigation Style */
.nav-top{background:#fff;background:rgba(255,255,255,0.1);text-transform:uppercase;width:100%;font-size:0.65em;line-height:2.6;height:36px;}
.nav-top a{padding:0.41em 1em;letter-spacing:0.1em;color:#444;display:inline-block;}
.nav-top a:hover{background:rgba(255,255,255,0.95);color:#333;}
.nav-social{float:left;padding:0.6em 0.6em 0 0.6em;}
.nav-social span{margin-right:0.5em;}
.nav-top span.right{float:right;}
.nav-top span.right a{float:left;display:block;}
/* Demo Buttons */
.menu{display:block;text-align:center;padding:2em 0;margin-bottom:3em;}
.menu a{border:4px solid rgba(255,255,255,1);border-radius:5px;background:rgba(255,255,255,1);display:inline-block;font-size:1em;line-height:100%;margin:0 5px;padding:0.7em;text-decoration:none;opacity:0.7;}
.menu a.active,.menu a:hover{opacity:1;}
/* Fusion Ads */
.adswrap{background:none repeat scroll 0 0 rgba(255,255,255,0.8);border:1px none rgba(0,0,0,0.1);padding:20px 15px;position:fixed;right:15px;z-index:999999;height:auto;margin-top:10px;}
.adswrap .adsclose{color:#777;margin-bottom:10px;background:#ddd;position:absolute;top:0;right:0;padding:3px 8px;font-size:10px;display:block;cursor:pointer;text-shadow:0 1px 1px #fff;}
#fusion_ad{font-size:12px;width:160px;text-align:center;}
#fusion_ad .fusionentire a{display:block;color:#444;margin-bottom:5px;}
#fusion_ad .powered{font-size:10px;}
/* Responsive */
@media screen and (max-width:25em){.nav-icon span{display:none;}
}

CSS代码(style.css):

/* Custom Stylesheet */
body,html{margin:0;-webkit-font-smoothing:antialiased;background:#f3f3f3;text-align:center;}
body html{padding:0;width:100%;float:left;font-family:'Roboto',Arial,sans-serif;}
body .header{color:#ecf0f1;}
.main p{color:#000;font-size:16px;font-weight:100;}
.nav-top{background:black;}
.nav-top a{color:#ecf0f1;}
/* ALL DEMO */
h1{color:#000;font-family:'Roboto',Arial,sans-serif;font-size:64px;}
h1 span{font-size:44px;display:block;}
.menu,.header,.nav-top{margin-bottom:0;position:relative;z-index:10;}
.main{max-width:1000px;margin:50px auto;}
.demo1 .main{overflow:hidden;position:relative;}
.page_container{float:left;width:700px;box-sizing:border-box;-webkit-box-sizing:border-box;-moz-box-sizing:border-box;padding:20px;background:white;}
.sidebar{float:left;width:300px;padding:20px;box-sizing:border-box;-webkit-box-sizing:border-box;-moz-box-sizing:border-box;-webkit-transition:background 500ms ease-out;-moz-transition:background 500ms ease-out;-o-transition:background 500ms ease-out;transition:background 500ms ease-out;background:#E7E7E2;border-top:5px solid #FF0052;}
.sidebar h1{font-size:20px;text-align:center;padding:10px;box-sizing:border-box;-webkit-box-sizing:border-box;-moz-box-sizing:border-box;margin:-20px -20px 20px;border-bottom:1px solid rgba(0,0,0,0.15);text-transform:uppercase;}
.page_container .header1{border:none;margin:-20px -20px 20px -20px;background:#FDDE02;color:black;text-align:center;padding:120px 50px;-webkit-transition:padding 500ms ease-out;-moz-transition:padding 500ms ease-out;-o-transition:padding 500ms ease-out;transition:padding 500ms ease-out;}
.page_container h2,.page_container h1,.sidebar h2{border-bottom:1px solid rgba(0,0,0,0.15);padding-bottom:15px;}
.page_container h2,.page_container h1,.page_container h3,.sidebar h2,.sidebar h3{color:black;text-align:left;}
.page_container p,.sidebar p{color:black;font-size:18px;line-height:180%;text-align:left;}
.page_container h2{font-size:35px;}
.demo2 .wrapper{max-width:1000px;margin:50px auto;}
.demo2 .wrapper .main{width:100%;margin-bottom:50px;position:relative;overflow:hidden;}
.autofix_sb.fixed{background:white;}
.autofix_sb.fixed.bottom{background:#E7E7E2;}
.demo2 .header1.autofix_sb.fixed{background:#FDDE02;margin:0;height:auto;width:700px;padding:10px;font-size:30px;box-sizing:border-box;-webkit-box-sizing:border-box;-moz-box-sizing:border-box;}
.demo2 .header1.autofix_sb.fixed.bottom{top:0;bottom:auto;}
.btns .btn{background:#FDDE02;padding:10px 25px;color:black;font-size:20px;text-transform:uppercase;font-weight:bold;margin:0 5px;display:inline-block;}
.btns .btn:hover{background:#FDC102;}
.demo3 .header1.fixed{z-index:4;}
.demo3 .btns.fixed{height:auto;width:660px;padding:65px 0 10px;background:-moz-linear-gradient(top,rgba(255,255,255,1) 20%,rgba(255,255,255,0) 100%);/* FF3.6+ */
 background:-webkit-gradient(linear,left top,left bottom,color-stop(0%,rgba(255,255,255,1)),color-stop(100%,rgba(255,255,255,0)));/* Chrome,Safari4+ */
 background:-webkit-linear-gradient(top,rgba(255,255,255,1) 20%,rgba(255,255,255,0) 100%);/* Chrome10+,Safari5.1+ */
 background:-o-linear-gradient(top,rgba(255,255,255,1) 20%,rgba(255,255,255,0) 100%);/* Opera 11.10+ */
 background:-ms-linear-gradient(top,rgba(255,255,255,1) 20%,rgba(255,255,255,0) 100%);/* IE10+ */
 background:linear-gradient(to bottom,rgba(255,255,255,1) 20%,rgba(255,255,255,0) 100%);/* W3C */
 filter:progid:DXImageTransform.Microsoft.gradient( startColorstr='#ffffff',endColorstr='#00ffffff',GradientType=0 );/* IE6-9 */
 z-index:1;}
附件:下载该文件资源,减少时间成本(增值服务)
File Source
.rar
288.56 KB
立即下载(CNY 2.9￥)
打赏 收藏
分享
分享到QQ 分享到微博 微信扫一扫
留言
该资源可下载
File Source
.rar
288.56 KB
立即下载
关珠
了解
打赏作者 鼓励作者
jquery特效9
最新结算
jquery虚拟键盘中文打字效果js代码
类型: .rar 金额: CNY 2.31￥ 状态: 待结算 详细>
jquery虚拟键盘中文打字效果js代码
类型: .rar 金额: CNY 0.29￥ 状态: 待结算 详细>
HTML5实现CSS滤镜图片切换特效代码
类型: .rar 金额: CNY 2.31￥ 状态: 待结算 详细>
jQuery头像裁剪插件cropbox js代码
类型: .rar 金额: CNY 0.29￥ 状态: 待结算 详细>
jQuery头像裁剪插件cropbox js代码
类型: .rar 金额: CNY 2.31￥ 状态: 待结算 详细>
CSS3制作3D图片立方体旋转特效
类型: .rar 金额: CNY 2.31￥ 状态: 待结算 详细>
CSS3制作3D图片立方体旋转特效
类型: .rar 金额: CNY 0.29￥ 状态: 待结算 详细>
CSS3制作3D图片立方体旋转特效
类型: .rar 金额: CNY 2.31￥ 状态: 待结算 详细>
CSS3制作3D图片立方体旋转特效
类型: .rar 金额: CNY 0.29￥ 状态: 待结算 详细>
jQuery+css3实现信封效果
类型: .rar 金额: CNY 0.29￥ 状态: 待结算 详细>
我们力求给您提供有用的文章,再此基础上,会附加营收资源,不做任何广告,让平台可以更好发展 若您发现您的权利被侵害，或使用了您的版权，请发邮件联系 sunlifel@foxmail.com ggbig觉得 : 不提供源码的文章不是好文章
合作伙伴
帮助中心
联系我们
  • QQ：21499807
  • 邮箱：sunlifel@foxmail.com
  • QQ扫一扫加QQ
    QQ扫一扫
Copyright 2023-2024 ggbig.com·皖ICP备2023004211号-1
打赏文章