Fatal编程技术网
  • javascript/
  • Javascript Div容器到达页面左边框时粘滞，被后面的容器推到看不见的地方

Javascript Div容器到达页面左边框时粘滞，被后面的容器推到看不见的地方

javascript jquery html css

Javascript Div容器到达页面左边框时粘滞，被后面的容器推到看不见的地方,javascript,jquery,html,css,sticky,Javascript,Jquery,Html,Css,Sticky,我在网上搜索了一下，希望你们能帮我 我有一个“条纹”的div容器（图像）并排作为一个整体比视口宽，所以他们迫使水平滚动。在一定数量的容器之后，应该有“特殊容器”，当它们到达视口的左边界时，它们会粘在左边（因此它们基本上是固定的）。随着滚动的继续，下一个“特殊容器”靠近了，它将第一个容器推到看不见的地方并占据了它的位置，因此它也会向左移动，依此类推 基本上，我想实现这样的目标，但水平： 我的HTML： <!DOCTYPE html> <head> <meta

我在网上搜索了一下，希望你们能帮我

我有一个“条纹”的div容器（图像）并排作为一个整体比视口宽，所以他们迫使水平滚动。在一定数量的容器之后，应该有“特殊容器”，当它们到达视口的左边界时，它们会粘在左边（因此它们基本上是固定的）。随着滚动的继续，下一个“特殊容器”靠近了，它将第一个容器推到看不见的地方并占据了它的位置，因此它也会向左移动，依此类推

基本上，我想实现这样的目标，但水平：

我的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>
p、 美国：我是javascript的新手。

我建议您使用jquery waypoints插件：

下面是一个演示：

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:

请注意，对于div1、div2、div3，您也可以很容易地做到这一点，但这取决于您的实现细节。

我建议您使用jquery waypoints插件：

下面是一个演示：

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:

请注意，使用div1、div2、div3也可以轻松完成此操作，但这取决于您的实现细节。

您有任何屏幕截图吗？。这样我就可以想象实际情况。我可以为您提供gif动画：希望有帮助！你有截图吗？。这样我就可以想象事情是如何进行的。我可以为你提供一个gif动画：希望对你有所帮助！不知怎的，它不起作用了，似乎脚本无法运行。。另外，如果我添加另一个toggleme类div并运行第一个，它会同时显示：-我必须为每个容器创建一个单独的类吗？你到底想做什么？如果要堆叠它们，需要更改其中一个的顶部坐标。我对你的例子进行了分叉，并添加了一些css以将它们作为例子进行堆栈。我想，只要第二组到了左边，“嗯”就坚持下去，第三组和“啊”也一样。但是“嗯”和“啊”同时出现。当div3到达视口的左边界时，我希望“ah”保持不变。我的第二个问题是，我无法运行脚本。。已更新代码。我已更新答案以反映您当前的评论。所有的部分都在那里，你可以为你的具体实现做准备。我现在从头开始重新构建了它，很多东西仍然不起作用，但至少脚本起作用了。我想你的工作已经完成了，非常感谢你的帮助！不知怎的，它不起作用了，似乎脚本无法运行。。另外，如果我添加另一个toggleme类div并运行第一个，它会同时显示：-我必须为每个容器创建一个单独的类吗？你到底想做什么？如果要堆叠它们，需要更改其中一个的顶部坐标。我对你的例子进行了分叉，并添加了一些css以将它们作为例子进行堆栈。我想，只要第二组到了左边，“嗯”就坚持下去，第三组和“啊”也一样。但是“嗯”和“啊”同时出现。当div3到达视口的左边界时，我希望“ah”保持不变。我的第二个问题是，我无法运行脚本。。已更新代码。我已更新答案以反映您当前的评论。所有的部分都在那里，你可以为你的具体实现做准备。我现在从头开始重新构建了它，很多东西仍然不起作用，但至少脚本起作用了。我想你的工作已经完成了，非常感谢你的帮助！ 
<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>

.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}