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">