温馨提示:本文翻译自stackoverflow.com,查看原文请点击:jquery - Horizontal sliding issue in javascript

jquery - JavaScript中的水平滑动问题

发布于 2020-03-27 16:07:00

我在javascript中制作了整页的水平滑块。看起来不错,但我发现了一个错误。我有两个div并排漂浮。一个div垂直滑动,而另一个div水平滑动。我想要的是两个div的滑动速度都相同。仅通过描述问题来使每个人都很难理解,因此我添加了我的工作的Codepen链接。请打开链接,您将自动了解问题。正如我在jquery中所做的那样,我需要javascript或jquery中的某种解决方案,而不是任何外部库。

<!doctype html>
<html>
    <head>
        <title>
            Sticky Sidebar
        </title>
    <link href="https://www.acropolisinfotech.com/assets/css/web-development.css" rel="stylesheet" />


    </head>
    <body>
        <div class="container-fluid">
            <div class="row normal-section bg-gray">

            </div>
            <div class="row sidebar-container normal-section flex">
                <div class="col-md-6 col-sm-6 col-xs-6 text-container bg-white pd-0-0" >
                    <div class="text-box bg-green flex all-center pd-0-0">
                        <h3>One</h3>

                    </div>
                    <div class="text-box bg-gray flex all-center pd-0-0">
                        <h3>Two</h3>

                    </div>
                    <div class="text-box bg-green flex all-center pd-0-0">
                        <h3>Three</h3>

                    </div>
                    <div class="text-box bg-gray flex all-center pd-0-0">
                        <h3>Four</h3>

                    </div>
                    <div class="text-box bg-green flex all-center pd-0-0">
                        <h3>Five</h3>

                    </div>
                    <div class="text-box bg-gray flex all-center pd-0-0">
                        <h3>Six</h3>

                    </div>


                </div>
                <div class="col-md-6 col-sm-6 col-xs-6 image-container bg-gradient pd-0-0 flex">
                    <div class="image-box-container pd-0-0 flex">
                    <div class="image-box pd-0-0">
                      <img src="https://homepages.cae.wisc.edu/~ece533/images/airplane.png" alt="One" />
                    </div>
                    <div class="image-box pd-0-0">
                      <img src="https://homepages.cae.wisc.edu/~ece533/images/arctichare.png" alt="One" />
                    </div>
                    <div class="image-box pd-0-0">
                      <img src="https://homepages.cae.wisc.edu/~ece533/images/baboon.png" alt="One" />
                    </div>
                    <div class="image-box pd-0-0">
                      <img src="https://homepages.cae.wisc.edu/~ece533/images/boat.png" alt="One" />
                    </div>
                    <div class="image-box pd-0-0 ">
                      <img src="https://homepages.cae.wisc.edu/~ece533/images/monarch.png" alt="One" />
                    </div>
                    <div class="image-box pd-0-0 ">
                      <img src="https://homepages.cae.wisc.edu/~ece533/images/pool.png" alt="One" />
                    </div>
                    </div>


                </div>
            </div>
            <div class="row normal-section next-section bg-green" id="next-section">

            </div>
            <div class="row normal-section bg-white">

            </div>
            <div class="row normal-section footer-section bg-gray">

            </div>
        </div>
    </body>
</html>
.container-fluid > div,.sidebar-container > div,.text-box,.image-box{
            min-height: 100vh;

        }
            .image-container{
                overflow: hidden;
            }
        .container-fluid > .footer-section{
            position: relative;
            z-index: 10;

        }
        .fixed-section{
            position: fixed;
            top: 0;
            width: 50%;
            height: 100vh;
            right: 0;
            z-index: 5;
            overflow: hidden;
        }
        .mgt-100{
            margin-top: 100vh;
        }
        #next-section{
            position: relative;
            z-index: 10;
        }
            .image-box{
                height: 100vh;
                overflow: hidden;
            }

            .image-box img{
                width:50vw;
                height: 100vh;
                -o-object-fit: cover;
                object-fit: cover;
            }
            .image-box-container{
                position: absolute;
                top: 0px;
                left: 0px;
                width: 300vw;
                height: 100vh;
                z-index: 3;
                white-space: nowrap;
                display: -webkit-box;
                display: -webkit-flex;
                display: -ms-flexbox;
                display: flex;
                -webkit-flex-wrap: nowrap;
                -ms-flex-wrap: nowrap;
                flex-wrap: nowrap;
            }
$(document).ready(function()
{
    var sidebar=$(".image-container");
    var sectionPosition=sidebar.offset().top;
    var next=$(".next-section");
    var nextTop=$(next).offset().top;
    var targetElement=document.querySelectorAll(".normal-section");
    var classOf=false;
    var sectionHeight=parseFloat(sidebar.css("height"));
    var translatingValue=0;
    var imageBoxWidth=$(".image-box:first-child").css("width");
    var textBoxHeight= $(".text-box:first-child").css("height");
    $(".image-container").css("width",textBoxHeight*6+"px");

    function setFixedPosition(position,elementPosition,element,next)
    {
      if(position >= elementPosition && position < nextTop)
      {
          $(element).addClass("fixed-section");
          //$(next).addClass("mgt-100");
      }
      else{
        $(element).removeClass("fixed-section");
        //$(next).removeClass("mgt-100");
      }
    }
    $(window).on("scroll",function()
    {
        let top=$(this).scrollTop();
        translatingValue=top-sectionPosition;
        setFixedPosition(top,sectionPosition,sidebar,next);
        let fixedStatus=$(".image-container").hasClass("fixed-section");
        if(fixedStatus)
            {
                if(translatingValue < sectionHeight)
                    {
                moveImageSlider(-(translatingValue));
                    }
                else{
                    moveImageSlider(translatingValue);
                }
            }
        else{
        }

    })

    function moveImageSlider(val)
    {
        $(".image-box-container").css("transform","translateX("+val+"px"+")");
    }



})

https://codepen.io/pranaysharma995/full/abzgoWx

查看更多

查看更多

提问者
Pranay Sharma
被浏览
13
Komang Ariana 2020-01-31 17:04

我们可以使用文本框高度与图像框宽度的比例因子。我已经更新了转换价值的计算,并且效果很好。

<script>
  $(document).ready(function() {
      var sidebar = $(".image-container");
      var sectionPosition = sidebar.offset().top;
      var next = $(".next-section");
      var nextTop = $(next).offset().top;
      var targetElement = document.querySelectorAll(".normal-section");
      var classOf = false;
      var sectionHeight = parseFloat(sidebar.css("height"));
      var translatingValue = 0;
      var imageBoxWidth = $(".image-box:first-child").css("width");
      var textBoxHeight = $(".text-box:first-child").css("height");
      $(".image-container").css("width", textBoxHeight * 6 + "px");

      function setFixedPosition(position, elementPosition, element, next) {
          if (position >= elementPosition && position < nextTop) {
              $(element).addClass("fixed-section");
              //$(next).addClass("mgt-100");
          } else {
              $(element).removeClass("fixed-section");
              //$(next).removeClass("mgt-100");
          }
      }
      $(window).on("scroll", function() {
          let top = $(this).scrollTop();

          // Update calculation position of translatingValue 
          let textBoxHeightInNumber = parseInt(textBoxHeight.replace('px', ''));
          let scrollOffset = top - sectionPosition;
          let slideNumber = 0;
          if (scrollOffset >= 0) {
            slideNumber = Math.ceil(scrollOffset / textBoxHeightInNumber);
            slideWidth = $(".image-box-container .image-box:nth-child("+slideNumber+")").width()
            translatingValue = scrollOffset * slideWidth / textBoxHeightInNumber;
          }

          setFixedPosition(top, sectionPosition, sidebar, next);
          let fixedStatus = $(".image-container").hasClass("fixed-section");
          if (fixedStatus) {
            moveImageSlider(-(translatingValue));
          } else {}

      })

      function moveImageSlider(val) {
          $(".image-box-container").css("transform", "translateX(" + val + "px" + ")");
      }

  })
</script>

请检查以下Codepen:https ://codepen.io/komang22/pen/oNgreKV

我只更改javascript代码

发布
问题

分享
好友

手机
浏览

扫码手机浏览