jQuery的可混搭浮动效果示例

程序员文章站 2024-02-05 20:44:28

...

Mashable是众所周知的社交媒体资源网站，它在用户滚动页面时产生了很棒的浮动效果。这是一个使用jQuery克隆此浮动效果的简单想法。

理念…

创建一个浮动框。
初始将浮动框位置放置在主体内容旁边。
用户滚动页面时，请继续检查滚动条位置。
如果滚动条y位置大于浮动框y位置，请动态更改浮动框y位置。
在滚动条y位置小于浮动框y位置的同时，恢复原始位置。
当然，使用jQuery。

1. HTML布局

一个简单的HTML布局，页眉，内容和页脚在内容上方放置了一个div“浮动框”。

<div id="page">
  	<div id="header"><h1>header</h1></div>
	<div id="floating-box"></div>
	<div id="body">
		<h1>content</h1>
		<h2>Mashable floating effect example</h2>
	</div>
	<div id="footer"><h1>footer</h1></div>
</div>

2.浮箱90×200

当人们滚动框时，此框将平滑浮动。您可能需要调整“ margin-left：-100px; 有点适合您的需求。

#floating-box{
	width:90px;
	height:200px;
	border:1px solid red;
	background-color:#BBBBBB;
	float:left;
	margin-left:-100px;
	margin-right:10px;
	position:absolute;
	z-index:1;
}

3.请不要冲突

确保jQuery与其他库没有冲突。强烈建议检查一下。

//avoid conflict with other script
    $j=jQuery.noConflict();

    $j(document).ready(function($) {

4.位置，位置，位置

绑定jQuery scroll（）事件以继续检查浏览器的滚动条位置。

$(window).scroll(function () { 
		  
	var scrollY = $(window).scrollTop();
	var isfixed = $floatingbox.css('position') == 'fixed';
			
	if($floatingbox.length > 0){
			
		if ( scrollY > bodyY && !isfixed ) {
			$floatingbox.stop().css({
				position: 'fixed',
				left: '50%',
				top: 20,
				marginLeft: -500
			});
		} else if ( scrollY < bodyY && isfixed ) {
			$floatingbox.css({
				position: 'relative',
				left: 0,
				top: 0,
				marginLeft: originalX
			});
		}		
	}	
});

如果滚动条y位置大于浮动框y位置，请将浮动框y位置更改为“ marginLeft：-500 ”。您可能需要自定义此值以适合您的需要。

if ( scrollY > bodyY && !isfixed ) {
	   $floatingbox.stop().css({
		position: 'fixed',
		left: '50%',
		top: 20,
		marginLeft: -500
	   });
	 }

如果滚动条y位置小于浮动框y位置，请恢复到原始位置。

if ( scrollY < bodyY && isfixed ) {
	   $floatingbox.css({
		position: 'relative',
		left: 0,
		top: 0,
		marginLeft: originalX
	   });
	}

5.完成

尝试播放以下示例以了解作品。

PS此浮动效果功能在我的DiggDigg WordPress插件中实现。

自己尝试

<!DOCTYPE html PUBLIC "-//W3C//DTD XHTML 1.0 Transitional//EN" 
"http://www.w3.org/TR/xhtml1/DTD/xhtml1-transitional.dtd">
<html>
<head>
<script type="text/javascript" src="jquery-1.4.2.min.js"></script>

<style type="text/css">
	#floating-box{
		width:90px;
		height:200px;
		border:1px solid red;
		background-color:#BBBBBB;
		float:left;
		margin-left:-100px;
		margin-right:10px;
		position:absolute;
		z-index:1;
	}
	#page{
		width:800px;
    	margin:0 auto;
	}
	#header{
		border:1px solid blue;
		height:100px;
		margin:8px;
	}
	#body{
		border:1px solid blue;
		height:2400px;
		margin:8px;
	}
	#footer{
		border:1px solid blue;
		height:100px;
		margin:8px;
	}
	h1,h2{
		padding:16px;
	}
</style>

</head>
<body>

  <div id="page">
  	<div id="header"><h1>header</h1></div>
	
	<div id="floating-box">

	</div>
	
	<div id="body">
		<h1>content</h1>
		<h2>Mashable floating effect example</h2>
	</div>
	<div id="footer"><h1>footer</h1></div>
  </div>

  
<script type="text/javascript">
	
    //avoid conflict with other script
    $j=jQuery.noConflict();

    $j(document).ready(function($) {

	//this is the floating content
	var $floatingbox = $('#floating-box');
	
	if($('#body').length > 0){
	
	  var bodyY = parseInt($('#body').offset().top) - 20;
	  var originalX = $floatingbox.css('margin-left');
	
	  $(window).scroll(function () { 
		  
	   var scrollY = $(window).scrollTop();
	   var isfixed = $floatingbox.css('position') == 'fixed';
			
	   if($floatingbox.length > 0){
			
	      $floatingbox.html("srollY : " + scrollY + ", bodyY : " 
                                    + bodyY + ", isfixed : " + isfixed);
	
	      if ( scrollY > bodyY && !isfixed ) {
			$floatingbox.stop().css({
			  position: 'fixed',
			  left: '50%',
			  top: 20,
			  marginLeft: -500
			});
		} else if ( scrollY < bodyY && isfixed ) {
		 	  $floatingbox.css({
			  position: 'relative',
			  left: 0,
			  top: 0,
			  marginLeft: originalX
		});
	     }		
	   }
       });
     }
  });
</script>
</body>
</html>

试试演示