Javascript的CSS絕對修復問題

我試圖讓滾動鎮到約450px後，絕對的div成爲固定。我有一些與jQuery合作的東西，但由於jQuery衝突，它破壞了一半的網站。下面是我想使用Javascript的CSS絕對修復問題

<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，但基本上向下滾動時沒有任何反應

來源

2014-10-18 ott

你什麼手段有關打破由於jQuery的衝突一半的網站？你嘗試[這]（http://stackoverflow.com/questions/20594452/navigation-bar-fixed-after-scroll）後？ – 2014-10-18 01:44:52

什麼是壁紙？我不明白wallpaper.idName。另外，你可以嘗試在jQuery中使用noconflict，所以你可以使用（jQuery）而不是「$」。 – Charles 2014-10-18 01:46:33

懶加載停止工作的所有的首頁文章。我嘗試過noconflict，但由於某種原因沒有幫助。我認爲這是加載另一個jquery庫引起的問題。 Javascript更乾淨，並有一個解決方案發布如下 – ott 2014-10-18 02:31:53

首先，純粹的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">

來源

2014-10-18 01:51:27 Jonathan

我喜歡這個糾正這個更正，會喜歡它，雖然等待OP的反饋，因爲我現在無法測試它。 – Charles 2014-10-18 01:55:13

對。我只是將window_onload更改爲window.onload，以便它可以立即使用。 @ott - 如果你從其他地方調用該函數，這將是不必要的。 – Jonathan 2014-10-18 02:00:57

也是使用getElementById正確引用className。 – Charles 2014-10-18 02:03:17

Javascript的CSS絕對修復問題

回答

相關問題