Javascript CSS绝对修复问题

Javascript CSS absolute to fixed issue

本文关键字：问题 CSS Javascript      更新时间：2023-09-26

我正试图在将城镇滚动到大约450px后，使一个绝对div变得固定。我有一些可以使用jquery的东西，但由于jquery冲突，它破坏了一半的网站。以下是我尝试使用的javascript

<script type="text/javascript">
function window_onload() {
  window.addEventListener("scroll",wallpaper_reset_top,false);
}
var wallpaper_top=450;
function wallpaper_reset_top() {
  var scrollTop=document.documentElement.scrollTop||document.body.scrollTop;
  if(scrollTop>wallpaper_top&&wallpaper.IdName==="wallpaper_absolute") {
    document.getElementById("wallpaper").IdName="wallpaper_fixed";
  }
  else if(scrollTop<wallpaper_top&&wallpaper.IdName==="wallpaper_fixed") {
    document.getElementById("wallpaper").IdName="wallpaper_absolute";
  }
}
</script>

这是中的一组div

<div id="body-wrapper">
    <?php if ( is_home() || is_front_page() ) { ?>
    <?php if(get_option('mvp_wall_ad')) { ?>
    <div id="wallpaper">
        <?php if(get_option('mvp_wall_url')) { ?>
        <a href="<?php echo get_option('mvp_wall_url'); ?>" class="wallpaper-link" target="_blank"></a>
        <?php } ?>

我真的不确定哪里出了问题，但向下滚动时基本上什么都没发生

首先，在纯JavaScript上做了很好的工作！我只是把它改成这样：

<script type="text/javascript">
window.onload = function() {
  window.addEventListener("scroll",wallpaper_reset_top,false);
}
var wallpaper_top=450;
function wallpaper_reset_top() {
  var scrollTop = document.documentElement.scrollTop || document.body.scrollTop;
  if(scrollTop > wallpaper_top && document.getElementById("wallpaper").className === "wallpaper_absolute") {
    document.getElementById("wallpaper").className = "wallpaper_fixed";
  }
  else if(scrollTop < wallpaper_top && document.getElementById("wallpaper").className === "wallpaper_fixed") {
    document.getElementById("wallpaper").className = "wallpaper_absolute";
  }
}
</script>

以及您的HTML:

<div id="wallpaper" class="wallpaper_absolute">
相关文章：