Javascript CSS 绝对解决问题

Question

在将城镇滚动到大约 450 像素后，我试图让一个绝对 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 } ?>

我不太确定哪里出错了，但是向下滚动时基本上没有任何反应

Answer 1

首先，在纯 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">