Question

我发现了这个旧的javascript / jq代码，它将更改第二个div内容，具体取决于您在第一个div滚动的位置，但是我不确定js / jq的工作方式，当我测试此代码时，尽管它不起作用工作

此代码通过滚动使div 1更改div 2上的内容 jsfiddle：https://jsfiddle.net/mohamedyousef1980/4up5a43d/1/

任何解决方案还是过时的代码？

HTML：

  <!doctype html>
<html lang="en">
  <head>
    <!-- Required meta tags -->
    <meta charset="utf-8">
    <meta name="viewport" content="width=device-width, initial-scale=1, shrink-to-fit=no">

    <!-- Font Awesome JS -->
    <script defer src="https://use.fontawesome.com/releases/v5.0.13/js/solid.js" integrity="sha384-tzzSw1/Vo+0N5UhStP3bvwWPq+uvzCMfrN1fEFe+xBmv1C/AtVX5K0uZtmcHitFZ" crossorigin="anonymous"></script>
    <script defer src="https://use.fontawesome.com/releases/v5.0.13/js/fontawesome.js" integrity="sha384-6OIrr52G08NpOFSZdxxz1xdNSndlD4vdcf/q2myIUVO0VsqaGHJsB0RaBE01VTOY" crossorigin="anonymous"></script>

    <!-- Bootstrap CSS -->
    <link rel="stylesheet" href="https://stackpath.bootstrapcdn.com/bootstrap/4.3.1/css/bootstrap.min.css" integrity="sha384-ggOyR0iXCbMQv3Xipma34MD+dH/1fQ784/j6cY/iJTQUOhcWr7x9JvoRxT2MZw1T" crossorigin="anonymous">
    <!-- Custom styles for this template -->
    <link href="style.css" rel="stylesheet">

     <script src="script.js"></script>





    <title>Hello, world!</title>
  </head>
  <body>
    <!-- Optional JavaScript -->
    <!-- jQuery first, then Popper.js, then Bootstrap JS -->
    <script src="https://code.jquery.com/jquery-3.3.1.slim.min.js" integrity="sha384-q8i/X+965DzO0rT7abK41JStQIAqVgRVzpbzo5smXKp4YfRvH+8abtTE1Pi6jizo" crossorigin="anonymous"></script>
    <script src="https://cdnjs.cloudflare.com/ajax/libs/popper.js/1.14.7/umd/popper.min.js" integrity="sha384-UO2eT0CpHqdSJQ6hJty5KVphtPhzWj9WO1clHTMGa3JDZwrnQq4sF86dIHNDz0W1" crossorigin="anonymous"></script>
    <script src="https://stackpath.bootstrapcdn.com/bootstrap/4.3.1/js/bootstrap.min.js" integrity="sha384-JjSmVgyd0p3pXB1rRibZUAYoIIy6OrQ6VrjIEaFf/nJGzIxFDsf4x0xIM+B07jRM" crossorigin="anonymous"></script>

      <div class="row">
        <div class="col">
          <section id="section1">Section 1</section>
          <section id="section2">Section 2</section>
          <section id="section3">Section 3</section>
          <section id="section4">Section 4</section>
        </div>
        <div class="col" style="position:fixed">
            <div id="sticky-anchor"></div>
            <div id="sticky" class='a1'><h1 class='titleMusic noSelect'>Arcade Fire</h1></div>

        </div>
      </div>




  </body>
</html>

CSS：

    #sticky{
  padding : 20px;
  background : red;
  color : #fff;
}
section{
  height : 1000px;
  background : yellow;
  margin : 20px;
}

.stick{
  position : fixed;
  top:0;
  width: 100%;
}

JS / JQ：

    function sticky_relocate() {
var window_top = $(window).scrollTop();
var div_top = $('#sticky-anchor').offset().top;
if (window_top > div_top) {
    $('#sticky').addClass('stick');
}
else {
    $('#sticky').removeClass('stick');
}
}

$(function () {
    $(window).scroll(function(){
      sticky_relocate();
      if($(window).scrollTop() > $('#section1').offset().top
         && $(window).scrollTop() < $('#section1').offset().top + $('#section1').outerHeight(true)
      ){
         $('#sticky h1').text('Section 1');
      }else if($(window).scrollTop() > $('#section2').offset().top
         && $(window).scrollTop() < $('#section2').offset().top + $('#section2').outerHeight(true)
      ){
         $('#sticky h1').text('Section 2');
      }else if($(window).scrollTop() > $('#section3').offset().top
         && $(window).scrollTop() < $('#section3').offset().top + $('#section3').outerHeight(true)
      ){
         $('#sticky h1').text('Section 3');
      }else if($(window).scrollTop() > $('#section4').offset().top
         && $(window).scrollTop() < $('#section4').offset().top + $('#section4').outerHeight(true)
      ){
         $('#sticky h1').text('Section 4');
      }else{
        $('#sticky h1').text('Arcade Fire');
      }
    });
});

使用javascript在一个div上滚动时在一个div上进行内容更改

0 个答案: