如何將瀏覽器位置應用於我的代碼？

-1

今天早些時候，我問了一個關於我的網頁非常「跳躍」的問題。如何將瀏覽器位置應用於我的代碼？

我已爲我的網頁在這裏的測試版本：http://armandbakx.nl/

而一個codepen在這裏可以查看：http://codepen.io/anon/pen/GpmQoY

$('img').on('click', show); 
$('.overlay').on('click', hide); 

function show(){ 
    $('.scroll-container').eq($(this).parent().index()).addClass('show'); 
    $('.content-container').addClass('no-scroll'); 
    $('.overlay').addClass('opacity'); 
} 

function hide() { 
    $('.scroll-container').removeClass('show'); 
    $('.content-container').removeClass('no-scroll'); 
    $('.overlay').removeClass('opacity'); 
}

頁的想法是，你點擊圖片（在這種情況下是一個紅色的正方形），導致一個隱藏的容器顯示，可以滾動，包含更多關於這個圖像的信息和圖像。

但是，當您單擊其中一個正方形，容器和疊加層顯示時，其他圖像（正方形）會移動。有人向我建議，在我的顯示功能中，我應該嘗試跟蹤瀏覽器在打開此容器時的位置。然後在我的隱藏功能中，將瀏覽器返回到該位置。

真相被告知，我對JavaScript並不擅長，所以我幾乎不知道該如何應用它。我在這個網頁上遇到了更多問題，我必須快速修復它們，因此我再次提出問題。有人能幫助我嗎？

來源

2015-10-06 Namrad

你能發佈你的CSS嗎？特別是'show'背後的CSS？ – denodster

這是'show'的唯一.css：.show { display：block; } – Namrad

我無法重現這一點。當我點擊紅色方塊時，我立即看到一個覆蓋層，沒有跳動。當我點擊疊加層時，它會消失，將我留在我滾動到的頁面的任何位置。我正在使用Chrome 45. –

從我所知道的情況來看，由於.no-scroll類，你的方塊正在移動。如果我刪除它，一切似乎正常工作。

試試這個：

$('img').on('click', show); 
$('.overlay').on('click', hide); 

function show(){ 
    $('.scroll-container').eq($(this).parent().index()).addClass('show'); 
    $('.overlay').addClass('opacity'); 
} 

function hide() { 
    $('.scroll-container').removeClass('show'); 
    $('.overlay').removeClass('opacity'); 
}

來源

2015-10-06 18:05:22 denodster

我剛測試過它，它在其它圖像保持原位的情況下效果很好，這非常棒！我現在唯一注意到的是背景隨容器一起滾動，它以前沒有做過，爲了達到這個目的你做了什麼改變，它可以撤消嗎？ – Namrad

由於您的示例代碼只有一個白色背景，我沒有注意到。你可能會玩你的背景風格，有CSS選項來保持背景固定與滾動頁面。 – denodster

在您的播放功能，您可以獲取滾動位置顯示的文本之前。

在您的隱藏功能中，將滾動位置設置爲先前的值。

$(document).scrollTop(scrollHeight);

來源

2015-10-06 18:12:48 Siva

應用這個做了我想要的。現在我唯一要找的東西，與_denodster的答案一樣，就是它如何做到這一點，同時保持背景中的紅色圖像不變。只有在滾動容器處於活動狀態時才應滾動，而不是滾動容器的背景。 – Namrad

把你的「滾動容器」放在div內給div一個隱藏的溢出屬性，然後給你的滾動容器一個滾動y的溢出屬性 – Siva

如何將瀏覽器位置應用於我的代碼？

回答

相關問題