在頁面的不同點添加類別/ ID

爲避免混淆，在您閱讀之前，這不是「多少像素向下」，而是在例如<section id="smaller">那麼它會添加一個類。我是JavaScript新手，所以請帶上一點鹽。謝謝。在頁面的不同點添加類別/ ID

我試圖通過添加一個新的屬性類到頭文件來改變頭。以下代碼在桌面上可以正常工作，但寬度永遠不會發生變化，但如果您的手機和設計有響應，該怎麼辦？是的，這正是我需要你幫助的原因。我已經嘗試了很多東西，不知道如何獲得像我想要的設置。我是web dev的新手，這是我的前幾個網站之一。

我現在代碼：

function init() { 
    window.addEventListener('scroll', function (e) { 
     var distanceY = window.pageYOffset || document.documentElement.scrollTop, header = document.querySelector("header"); 
     if (distanceY > 606) { 
      header.setAttribute("class", "smaller"); 
     } else { 
      header.removeAttribute("class"); 
     } 
    }); 
} 
window.onload = init();

夫婦的事情，我需要清理，和/或如果你是一個有點困惑：

頭是實際<header>不是與頭類或ID的div。
就像我說的，這不，現在工作，但僅適用於固定寬度爲每個屏幕尺寸
我包括在其上只是<body>標籤結束前鏈接的js文件的代碼非常有用。
「606」的時候，變化是發生在像素的長度向下的頁面

有沒有一種方法，當你到達網頁上的某個地方的屬性添加到頭？如果反正可以給我一些指導，那會很棒。感謝大家閱讀本文並享受你的餘生。 :)

來源

2016-04-04 hermitspike

使用element.getBoundingClientRect()檢索您的對象的屏幕位置信息。這將爲您提供一個包含底部，高度，左側等的對象，用於您可能想要使用的任務top和height。結合window.innerHeight你可以編寫你想要的。

window.addEventListener('scroll', function() { 
    var r = header.getBoundingClientRect(); 
    if (r.top < 300) 
     header.setAttribute("class", "smaller"); 
    else 
     header.removeAttribute("class"); 
});

不過，也有可能是更好的方法來做到這一點，看看「CSS媒體查詢」，他們提供了幾乎所有的東西你可能需要讓你的網頁響應。

來源

2016-04-04 10:24:20 ZPiDER

請求實施是否太多了？：P對不起，有點不知所措。這將非常感激。謝謝！ – hermitspike

我添加了一些示例實現，我不確切知道你要做什麼，但是這段代碼向屏幕上超過300px的元素添加了一個類。提示：當你是JS的新手時，看看jQuery，這對於優雅地處理事情會有很大的幫助。 – ZPiDER

@caramba發佈的另一個答案幫助我解釋了我的目標=如果您首先檢查頁面中的元素的位置並將其設置爲'distanceY'，那麼您仍然可以使用其餘的代碼。這是一種做法，但它應該有助於你理解...希望。感謝您的回答，我會研究它並嘗試一下。 – hermitspike

我想通過.position();來解決這個問題。這裏是我的解釋：

#sub-services是我想要的位置的元素。

el是#sub-services的位置。

而smaller是添加到<header>的類。

下面是完整的代碼，我用我的網站，其中：

var el = $("#sub-services"); 
var position = el.position(); 

function init() { 
    window.addEventListener('scroll', function (e) { 
     var distanceY = window.pageYOffset || document.documentElement.scrollTop, header = document.querySelector("header"); 
     if (distanceY > position.top) { 
      header.setAttribute("class", "smaller"); 
     } else { 
      header.removeAttribute("class"); 
     } 
    }); 
} 
window.onload = init();

這是很容易使用jQuery做。感謝@ caramba指引我朝着正確的方向前進。

來源

2016-04-04 11:25:06 hermitspike

感謝一切。 – hermitspike

這是你的評論是有幫助的，而不是「CSS媒體查詢」。老實說並不想成爲可恨的人。我不能贊成評論。：/ +我必須等待2天才能接受我的答案。 – hermitspike

在頁面的不同點添加類別/ ID

回答

相關問題