1

我有点在整个互联网上搜索这个，希望你们能帮助我。

我有一个并排的 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;
    }

ps：我是 javascript 的血腥初学者。

4

1 回答 1

1

我建议你使用 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 轻松执行此操作，但这仅取决于您的实现细节。

于 2013-04-06T20:10:00.230 回答