我有点在整个互联网上搜索，希望你们能帮帮我。
我的div容器（图像）的“条带”整体上比视口宽，因此它们迫使水平滚动。在一定数量的容器之后，应该有“特殊容器”，当它们到达视口的左边界时，这些容器将粘在左侧（因此它们基本上是固定的）。随着滚动的继续，下一个“特殊容器”逼近，这将第一个容器移出视线并取代了它的位置，因此它也向左移动，依此类推。
基本上我想实现这样的目标，但要水平实现：
http://jsfiddle.net/f3y9s/1/
我的HTML：
<!DOCTYPE html>
<head>
<meta http-equiv="Content-Type" content="text/html; charset=UTF-8" />
<title>-</title>
<link rel="stylesheet" type="text/css" media="screen" href="css/projekt.css" title="nofilter">
<script src="js/jquery-1.2.6.min.js" type="text/javascript" charset="utf-8"></script>
<script src="js/jquery.serialScroll-1.2.2-min.js" type="text/javascript" charset="utf-8"></script>
<script src="js/waypoints.js"></script>
<script src="js/waypoints-sticky.js"></script>
<script type="text/javascript" charset="utf-8">
$(function(){
$(".post").wrapInner("<table><tr>");
$("img").wrap("<td>");
});
$(function(){
$("#projektimg").wrapInner("<table><tr>");
$(".post").wrap("<td>");
});
</script>
<!--<script type="text/javascript" charset="utf-8">
$('.my-sticky-element').waypoint(function(direction) {
$body.toggleClass(this.id + '-visible', direction === 'right');
}, {
horizontal: true
});</script>-->
<script>$(document).ready(function () {
$('.my-sticky-element').waypoint(function (direction) {
if (direction=='right')
$('.my-sticky-element').addClass('fixed');
else {
$('.my-sticky-element').removeClass('fixed');
}
}, {
horizontal: true
});
});</script>
</head>
<body>
<div class="my-sticky-element">
project description goes here
</div>
<div id="projektimg">
<div class="post">
<img src="img/1.jpg"/>
<img src="img/2.jpg"/>
<img src="img/3.jpg"/>
<img src="img/4.jpg"/>
<img src="img/5.jpg"/>
</div>
</div>
</body>
</html>
我的CSS：
/* Global */
/* Reset */
html, body, div, span, applet, object, iframe,h1, h2, h3, h4, h5, h6, p, blockquote, pre,a, abbr, acronym, address, big, cite, code,del, dfn, em, font, img, ins, kbd, q, s, samp,small, strike, strong, sub, sup, tt, var,b, u, i, center,dl, dt, dd, ol, ul, li,fieldset, form, label, legend,table, caption, tbody, tfoot, thead, tr, th, td {margin: 0;padding: 0;border: 0;outline: 0;font-size: 100%;vertical-align: baseline;background: transparent;}body {line-height: 1;}ol, ul {list-style: none;}blockquote, q {quotes: none;}/* remember to define focus styles! */:focus {outline: 0;}/* remember to highlight inserts somehow! */ins {text-decoration: none;}del {text-decoration: line-through;}/* tables still need 'cellspacing="0"' in the markup */table {border-collapse: collapse;border-spacing: 0;}
* {
padding:0;
margin:0;
border: none;
}
body {
background-color: #ffffff;
font-family: Helvetica, sans-serif;
font-size: 11px;
color: #000;
}
a {
text-decoration: none;
color: #282828;
-webkit-transition: color .2s;
-moz-transition: color .2s;
-o-transition: color .2s;
-ms-transition: color 0,2s;
transition: color .2s;
}
a:hover {
color: #ff8855;
}
/* Projekt, Galerie */
#projektimg {
position: absolute;
z-index: 1;
top: 50%;
margin-top: -250px;
overflow-x: auto;
height: 510px;
float: left;
}
td {
vertical-align: top;
padding: 0;
margin: 0;
}
table, tbody {
padding: 0;
margin: 0;
}
tr {
margin: 0;
padding: 0;
}
/* Sticky */
.my-sticky-element {
position: absolute;
top: 50%;
margin-top: -250px;
overflow-x: auto;
height: 440px;
width: 210px;
background-color: #ff0000;
padding: 30px 30px 30px 30px;
float: left;
z-index: 5;
}
.my-sticky-element.fixed {
position: fixed;
left: 0;
z-index: 100;
}
附注：我是使用JavaScript的流血初学者。
最佳答案
我建议您使用jQuery Waypoints插件：
http://imakewebthings.com/jquery-waypoints/#shortcuts-examples
这是一个演示：http://jsfiddle.net/lucuma/UAGdf/7/
Javascript：
$(document).ready(function () {
$('.container div:eq(1)').waypoint(function (direction) {
//alert('here');
if (direction=='right')
$('.toggleme').addClass('fixed');
else {
$('.toggleme').removeClass('fixed');
}
}, {
//offset: $.waypoints('viewportHeight') / 2,
horizontal: true
});
});
HTML：
<div class="container">
<div id="div1">div 1</div>
<div id="div2">div 2 <div class="toggleme">hmm</div></div>
<div id="div3"><div class="toggleme">hmm</div></div>
<div id="div4">div 4</div>
</div>
CSS：
.container>div {
width:500px;
height:200px;
display:block;
border:1px solid black;
float:left;
}
.toggleme.fixed {position:fixed; left:0;top:0;z-index:100;background-color:blue}
.container {width: 5000px}
请注意，您可以使用div1，div2，div3轻松完成此操作，但这仅取决于您的实现细节。
关于javascript - Div-Container到达页面左边界时发粘，被以下容器推出视线，我们在Stack Overflow上找到一个类似的问题：https://stackoverflow.com/questions/15854557/