僅當窗口縮小時才使元素水平移動

我正在一個個人網站（一個投資組合網站，我猜），並且在瀏覽器窗口被完全屏蔽時看到了我想要的東西，但是當零件被切斷時窗戶縮小了（當然）。我使用的是Windows 7，並且始終在我的屏幕兩側停靠了一個窗口。如果我的網站能夠正常工作，以便在瀏覽器完全屏蔽時固定某些部分，但是一旦瀏覽器窗口達到一定的大小後，隨着窗口縮小，它們就會移動。這可能嗎？這是否需要JavaScript（我根本不擅長）？僅當窗口縮小時才使元素水平移動

這裏是一個鏈接到相關網頁的屏幕截圖，與第三圖像正在尋購顯示什麼，我想發生： http://imgur.com/a/EDWjh#0

我要側導航儀（黑匣子/文本上左側）和標誌（右上角，也鏈接到我的索引頁面）在窗口較大時固定，但縮小時縮小（並與瀏覽器窗口兩側齊平）。

的CSS有問題的作品是：

#blackbox{ 
    background-color: black; 
    width: 175px; 
    height: 180px; 
    left: 50%; 
    margin-left: 355px; 
    margin-top: -20px; 
    position: fixed; 
    z-index:4; 
} 

#navleft{ 
    width: 175px; 
    height:430px; 
    background-color:black; 
    position: fixed; 
    margin-top: -50px; 
    left: 50%; 
    margin-left:-530px; 
}

和有關HTML只是div的，帶有對標誌圖像的部分右上角的黑盒子，可鏈接到我的索引頁，而左側導航具有到其他頁面的文本鏈接。

它的價值是什麼，頁面的肉是一個1060像素寬的容器。

我希望你們中的一些人能夠幫助我，而且我當然希望解決方案不是太難。非常感謝您提供的所有時間和指導，我很樂意回答任何問題。謝謝！

來源

2014-01-05 user3159347

難道我們任何答案的幫助？ – acarlon

@media

由Chris正確指出，您可以使用媒體查詢來執行此操作，而無需使用javascrip噸。在這裏看到：jsfiddle

注意，同樣適用於作爲jQuery的例子 - 的jsfiddle縮放頁面時移動中間欄，使用完整的瀏覽器頁面時，這種情況不會發生。

相關的CSS是：

@media screen and (min-width: 400px) { 
    .testPos 
    { 
     right:auto; 
     left:200px; 
    } 
}

的jQuery

下面是一個簡單的例子與輸入顯示如何使用jquery做到這一點：jsfiddle

輸入將處於固定的位置，直到窗口被調整爲太小，然後它會粘在右邊。 注意：由於jsfiddle中間條根據大小移動，輸入也會初始移動，這不會發生在瀏覽器未調整大小的正常窗口上（請注意距離酒吧將不變）。

有跡象表明，添加和刪除CSS類根據窗口的大小：

.naturalPos 
{ 
    left:200px;  
} 

.stickRight 
{  
    right:0px; 
}

來源

2014-01-05 23:59:30 acarlon

感謝您的詳細解答！我確信你所說的一切都是正確的，但我沒有辦法讓它在jsfiddle頁面之外工作。儘管如此，我仍然會保留它，因爲它可能是一些小事，我搞砸了。我覺得我理解代碼正在做什麼，所以希望我可以操縱我的頁面。再次感謝。 – user3159347

@ user3159347 - 很高興提供幫助。我建議你儘量簡化你的環境，看看你的代碼與jsfiddle不同。如果你可以讓一個簡單的jsfiddle顯示這個問題，post是一個SO問題，你會得到幫助。祝你好運。 – acarlon

得到了一切工作，感謝您的幫助！我最終使用媒體查詢。我認爲訣竅（至少對我來說）是爲了確保受媒體查詢影響的類只是添加到我的id中的屬性中，而不會與它們發生衝突（例如，「float：left;」作爲屬性正常的瀏覽器窗口條件可以用「left：0px;」修改爲重新調整大小的窗口，但我不認爲保留餘量值會結合等）。此外，分配「位置」屬性似乎有很大幫助。 – user3159347

在現代瀏覽器（支持CSS版本3的瀏覽器）上不需要JavaScript。您可以使用media queries根據視口的寬度提供不同的CSS。從鏈接的文章

例子：

@media (max-width: 600px) { 
    .facet_sidebar { 
    display: none; 
    } 
}

來源

2014-01-05 23:32:50 Chris

+1，因爲@media是我答案的一部分。 – acarlon

如果您需要此使用JavaScript來工作，你可以使用window.resize事件來包裝自己需要的任何功能來調整頁面：

window.onresize = function(event) { 
    ... 
}

來源

2014-01-05 23:38:53 RobM

僅當窗口縮小時才使元素水平移動

回答

相關問題