search

Home >Web Front-end >HTML Tutorial >大神，我这代码运行时为什么出错？_html/css_WEB-ITnose

大神，我这代码运行时为什么出错？_html/css_WEB-ITnose

WBOYWBOYWBOYWBOYWBOYWBOYWBOYWBOYWBOYWBOYWBOYWBOYWB
WBOYWBOYWBOYWBOYWBOYWBOYWBOYWBOYWBOYWBOYWBOYWBOYWBOriginal
2016-06-21 09:04:201259browse

<!DOCTYPE html PUBLIC "-//W3C//DTD XHTML 1.0 Transitional//EN" "http://www.w3.org/TR/xhtml1/DTD/xhtml1-transitional.dtd"><html xmlns="http://www.w3.org/1999/xhtml"><head><meta http-equiv="Content-Type" content="text/html; charset=utf-8" /><title>CSS等高布局</title><script type="text/javascript" src="http://jt.875.cn/js/jquery.js"></script> <style type="text/css">#wrap{ overflow:hidden; width:1200px; margin:0 auto;}.left{ float:left; width:150px; height:600px ; background:#00FFFF; }#center{    float:left;    width:880px;    height:1800px ;    background:#FF0000;    margin-right: 10px;    margin-left: 10px; }.right{ float:right; width:150px; height:600px ; background:#00FF00; }</style></head><body><div id="wrap"> <div class="left" id="left"> <script type="text/javascript"> $.fn.smartFloat = function() { var position = function(element) { var top = element.position().top, pos = element.css("position"); $(window).scroll(function() { var scrolls = $(this).scrollTop(); if (scrolls > top) { if (window.XMLHttpRequest) { element.css({ position: "fixed", top: 0 }); } else { element.css({ top: scrolls }); } }else { element.css({ position: pos, top: top }); } }); }; return $(this).each(function() { position($(this)); }); }; //绑定 $("#left").smartFloat(); </script>  </div> <div id="center">  <p>center</p> </div> <div class="right" id="right">   <script type="text/javascript"> $.fn.smartFloat = function() { var position = function(element) { var top = element.position().top, pos = element.css("position"); $(window).scroll(function() { var scrolls = $(this).scrollTop(); if (scrolls > top) { if (window.XMLHttpRequest) { element.css({ position: "fixed", top: 0 }); } else { element.css({ top: scrolls }); } }else { element.css({ position: pos, top: top }); } }); }; return $(this).each(function() { position($(this)); }); }; //绑定 $("#right").smartFloat(); </script>  </div></div></body></html>


打开正常，往下拉，出现错位等问题。请高手指点


回复讨论(解决方案)

我猜你要的是这种效果？ 

<!DOCTYPE html PUBLIC "-//W3C//DTD XHTML 1.0 Transitional//EN" "http://www.w3.org/TR/xhtml1/DTD/xhtml1-transitional.dtd"><html xmlns="http://www.w3.org/1999/xhtml"><head><meta http-equiv="Content-Type" content="text/html; charset=utf-8" /><title>CSS等高布局</title><script type="text/javascript" src="http://jt.875.cn/js/jquery.js"></script> <style type="text/css">#wrap{ overflow:hidden; width:1200px; margin:0 auto;}.left{ float:left; width:150px; height:600px ; background:#00FFFF; }#center{    float:left;    width:880px;    height:1800px ;    background:#FF0000;    margin-right: 10px;    margin-left: 10px; }.right{ float:right; width:150px; height:600px ; background:#00FF00; }</style></head><body><div id="wrap"> <div class="left" id="left" > </div> <div id="center">  <p>center</p><p>center2</p><p>center3</p><p>center4</p><p>center5</p><p>center6</p><p>center7</p> </div> <div class="right" id="right"><script>var min_scroll=30;///触发效果的滚动条top值,$(document).scroll(function(){		if($(this).scrollTop()>=min_scroll&&!$('#left').attr('style'))	{			var right={'top':$('#right').offset().top,'left':$('#right').offset().left};		var left={'top':$('#left').offset().top,'left':$('#left').offset().left};		var center={'left':$('#center').position().left}		$('#center').css({'position':'absolute','left':center.left});		$('#left').css({'z-index':10,'position':'fixed','top':left.top,'left':left.left});		$('#right').css({'z-index':10,'position':'fixed','top':right.top,'left':right.left});	}	if($(this).scrollTop()<min_scroll&&$('#left').attr('style'))	{		$('#left').removeAttr('style');		$('#right').removeAttr('style');		$('#center').removeAttr('style');	}	});</script> </div></div></body></html>

<!DOCTYPE html PUBLIC "-//W3C//DTD XHTML 1.0 Transitional//EN" "http://www.w3.org/TR/xhtml1/DTD/xhtml1-transitional.dtd"><html xmlns="http://www.w3.org/1999/xhtml"><head><meta http-equiv="Content-Type" content="text/html; charset=utf-8" /><title>CSS等高布局</title><script type="text/javascript" src="http://jt.875.cn/js/jquery.js"></script> <style type="text/css">#wrap{ overflow:hidden; width:1200px; margin:0 auto;}.top{    width:1200px;    height:150px;    background:#000;    margin-bottom: 10px; } .left{ float:left; width:150px; height:600px ; background:#00FFFF; }#center{    float:left;    width:880px;    height:1800px ;    background:#FF0000;    margin-right: 10px;    margin-left: 10px; }.right{ float:right; width:150px; height:600px ; background:#00FF00; } .bot{	  float:left;    width:1200px;    height:150px;    margin-top: 10px;    background-color: #00F; } </style></head><body><div id="wrap"> <div class="top"> </div>  <div class="left" id="left" > </div> <div id="center">  <p>center</p><p>center2</p><p>center3</p><p>center4</p><p>center5</p><p>center6</p><p>center7</p><p>center8</p><p>center9</p><p>center10</p> </div> <div class="right" id="right"> </div>  <div class="bot" id="bot"> </div> </div><script>var min_scroll=30;///触发效果的滚动条top值,$(document).scroll(function(){          if($(this).scrollTop()>=min_scroll&&!$('#left').attr('style'))    {           var right={'top':0,'left':$('#right').offset().left};        var left={'top':0,'left':$('#left').offset().left};        var center={'left':$('#center').position().left}		var bot={'top':0,'left':$('#bot').offset().left}		$('#bot').css({'position':'fixed','left':bot.left,'top':bot.top,'margin':0});        $('#center').css({'position':'absolute','left':center.left});        $('#left').css({'z-index':10,'position':'fixed','top':left.top,'left':left.left});        $('#right').css({'z-index':10,'position':'fixed','top':right.top,'left':right.left});    }    if($(this).scrollTop()<min_scroll&&$('#left').attr('style'))    {        $('#left').removeAttr('style');		$('#bot').removeAttr('style');        $('#right').removeAttr('style');        $('#center').removeAttr('style');    }      });</script> </body></html>

Statement：
The content of this article is voluntarily contributed by netizens, and the copyright belongs to the original author. This site does not assume corresponding legal responsibility. If you find any content suspected of plagiarism or infringement, please contact admin@php.cn
Previous article：html+css横向双导航_html/css_WEB-ITnoseNext article：菜鸟求教，各位大大有什么办法在html中用绝对路径显示一张图片_html/css_WEB-ITnose

Related articles

See more