Question

当用户向下滚动时，我试图使我的社交媒体栏在页面的左侧和左侧。

我只希望在重新滚动到整个页面时重新出现该栏。我想要的效果是similar to this. 我希望我消失在左侧，并且仅在用户一直滚动到整个页面时才重新出现。如果可能的话，我想将JavaScript保持在最低水平，并且（主要）使用CSS转换。

我当前的代码是这样：

var prevScrollpos = window.pageYOffset;
window.onscroll = function() {
  var currentScrollPos = window.pageYOffset;
  if (prevScrollpos > currentScrollPos) {
    document.getElementById("mySidenav").style.left = "0";
  } else {
    document.getElementById("mySidenav").style.right = "-50px";
  }
  prevScrollpos = currentScrollPos;
}

#mySidenav a {
  position: absolute;
  left: -100px;
  transition: 0.3s;
  padding: 15px;
  width: auto;
  text-decoration: none;
  font-size: 20px;
  color: white;
  border-radius: 0 5px 5px 0;
}

#mySidenav a:hover {
  left: 0;
}

#about {
  top: 20px;
  background-color: #1DA1F2;
}

#blog {
  top: 80px;
  background-color: #4867AA;
}

#projects {
  top: 140px;
  background-color: #E03B65;
}

#contact {
  top: 200px;
  background-color: #FF4500;
}

#filler {
  margin-top: 2000px;
}

<html>

<head>
  <link href="style.css" rel="stylesheet" type="text/css" />
  <link rel="stylesheet" href="https://use.fontawesome.com/releases/v5.0.9/css/all.css" integrity="sha384-5SOiIsAziJl6AWe0HWRKTXlfcSHKmYV4RBF18PPJ173Kzn7jzMyFuTtk8JA7QQG1" crossorigin="anonymous">
</head>

<body>
  <div id="mySidenav" class="sidenav">

    <a href="#" id="about"> &nbsp; Twitter &nbsp; &nbsp; &nbsp;
      <i class="fab fa-twitter"></i>
      </a>

    <a href="#" id="blog">Facebook &nbsp; &nbsp;  <i class="fab fa-facebook"></i>
      </a>

    <a href="#" id="projects"> &nbsp;Instagram &nbsp;
        <i class="fab fa-instagram"></i>&nbsp;
      </a>

    <a href="#" id="contact"> &nbsp; &nbsp; &nbsp;Reddit &nbsp; &nbsp;
        <i class="fab fa-reddit"></i>
      </a>

  </div>
  <p id="filler">Filler</p>
</body>

</html>

有人可以帮助指导我正确的方向吗？

Answer 1

如果我正确理解了您的问题，那么可以通过添加以下隐藏菜单时适用的CSS来实现此目的：

#mySidenav.hidden a {
  left: -200px;
}

接下来，您将更新脚本，以便根据滚动方向将hidden类应用于#mySidenav或从var prevScrollpos = window.pageYOffset; window.addEventListener("scroll", function() { var currentScrollPos = window.pageYOffset; var sideNavClassList = document.getElementById("mySidenav").classList; // When new scroll position is less than previos, remove hidden // class from #mySidenav so that it comes back into view, otherwise // apply the hidden class to ensure that it's out of view if (prevScrollpos > currentScrollPos) { sideNavClassList.remove("hidden"); } else { sideNavClassList.add("hidden"); } prevScrollpos = currentScrollPos; });中删除：

var prevScrollpos = window.pageYOffset;


window.addEventListener('scroll', function() {

  var currentScrollPos = window.pageYOffset;
  var sideNavClassList = document.getElementById("mySidenav").classList;

  if (prevScrollpos > currentScrollPos) {
    sideNavClassList.remove("hidden");
  } else {
    sideNavClassList.add("hidden");
  }
  prevScrollpos = currentScrollPos;
})

这是完整的代码段-希望对您有所帮助！

#mySidenav.hidden a {
  left: -200px;
}

#mySidenav a {
  position: absolute;
  left: -100px;
  transition: 0.3s;
  padding: 15px;
  width: auto;
  text-decoration: none;
  font-size: 20px;
  color: white;
  border-radius: 0 5px 5px 0;
}

#mySidenav a:hover {
  left: 0;
}

#about {
  top: 20px;
  background-color: #1DA1F2;
}

#blog {
  top: 80px;
  background-color: #4867AA;
}

#projects {
  top: 140px;
  background-color: #E03B65;
}

#contact {
  top: 200px;
  background-color: #FF4500;
}

#filler {
  margin-top: 2000px;
}

<html>

<head>
  <link href="style.css" rel="stylesheet" type="text/css" />
  <link rel="stylesheet" href="https://use.fontawesome.com/releases/v5.0.9/css/all.css" integrity="sha384-5SOiIsAziJl6AWe0HWRKTXlfcSHKmYV4RBF18PPJ173Kzn7jzMyFuTtk8JA7QQG1" crossorigin="anonymous">
</head>

<body>
  <div id="mySidenav" class="sidenav">

    <a href="#" id="about"> &nbsp; Twitter &nbsp; &nbsp; &nbsp;
      <i class="fab fa-twitter"></i>
      </a>

    <a href="#" id="blog">Facebook &nbsp; &nbsp;  <i class="fab fa-facebook"></i>
      </a>

    <a href="#" id="projects"> &nbsp;Instagram &nbsp;
        <i class="fab fa-instagram"></i>&nbsp;
      </a>

    <a href="#" id="contact"> &nbsp; &nbsp; &nbsp;Reddit &nbsp; &nbsp;
        <i class="fab fa-reddit"></i>
      </a>

  </div>
  <p id="filler">Filler</p>
</body>

</html>

+ (int)totalMinutesFromHHmm:(NSString *)HHmm {
    NSDateFormatter *dateFormatter = [[NSDateFormatter alloc] init];
    NSTimeZone *timeZone = [NSTimeZone timeZoneWithName:@"UTC"];
    [dateFormatter setTimeZone:timeZone];
    [dateFormatter setDateFormat:@"HHmm"];
    NSLocale *enLocale = [[NSLocale alloc] initWithLocaleIdentifier:@"en-GB"];
    [dateFormatter setLocale:enLocale];

    NSDate *date = [dateFormatter dateFromString:HHmm];
    NSCalendar *calendar = [[NSCalendar alloc] initWithCalendarIdentifier:NSCalendarIdentifierGregorian];
    NSDateComponents *components = [calendar components:( NSCalendarUnitHour | NSCalendarUnitMinute | NSCalendarUnitSecond) fromDate:date];
    NSInteger hour = [components hour];
    NSInteger minute = [components minute];
    return (int)(hour * 60 + minute);
}

希望社交媒体栏在滚动条上消失

1 个答案: