1

I kinda search the whole internet for this, hopefully you guys can help me out.

I have a "stripe" of div-containers (images) side by side as a whole wider than the viewport so they force a horizontal scroll. After a certain amount of containers there should be "special containers" which - as they reach the left border of the viewport - stick to the left (so they are basically fixed). As scrolling continues, the next "special container" approaches, which pushes the first out of sight and takes its place, so it sticks to the left, too, and so on.

Basically I want to achieve something like this but horizontally: http://jsfiddle.net/f3y9s/1/

My 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>

My 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;
    }

p.s.: I'm a bloody beginner with 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 に答える