ScrollToFixed插件創建神祕的div，廢墟頁面佈局？

我剛使用ScrollToFixed插件通過bigspotteddogScrollToFixed插件創建神祕的div，廢墟頁面佈局？

（https://github.com/bigspotteddog/ScrollToFixed）

在我的網站

（http://faiththeagency.com/easyphone/frequently-asked-questions.php）*更新網站，讓插件工作

，基本上從我所看到的這個插件直接在我的＃float-cta div下面插入一個div，並且具有以下屬性：

<div style="width: 354px; height: 457px; float: none; display: none; "></div>

而這正在扼殺我的佈局，改變和跳來跳去，任何人都可以看到爲什麼會發生這種情況？

這是我的代碼。

<div id="float-cta"> 

    <img src="img/phone.gif" /> 
    <h2>Call us on: 0800 085 2761</h2> 
    <p class="f13">Lines are open 9.00am – 5.00pm,<br /> Monday to Friday.</p> 

    <img src="img/store.gif" /> 
    <h2>Go in store</h2> 
    <p class="f13">The Age UK Shop is located in Peterborough town centre: <span class="bold">25 Westgate, Peterborough, PE1 1PZ</span>. <span class="italic">Age UK Limited is acting as our<br /> in-store sales agent. All contracts are with CyCell Limited.</span></p> 

    <a href="easyphone_order_form.pdf" class="block nul"><img src="img/form.gif" /> 
    <h2 class="ul">Download an order form</h2> 
    <p class="f13">Click here to download the order form. <br />Fill it in and post it in a stamp addressed envelope to <span class="bold">EasyPhone, PO Box 70812, London, NW1W 8ZA</span></p></a> 

     <img src="img/letter.gif" /> 
     <h2>Email order form</h2> 
     <p class="f13">Scan and email your completed order form<br /> to <a href="mailto:[email protected]">[email protected]</a></p> 

    </div>

jQuery的

$('#float-cta').scrollToFixed();

CSS

#float-cta { 
position:absolute; 
width:322px; height:395px; 
background-color:#00853e; 
margin: 30px 0 0 0; 
color:#FFFFFF; 
font-size:14px/16pt; 
padding: 16px; 
right:39px; 
} 

#float-cta.fixed { 
position:fixed; 
top: 0; 
} 

#float-cta p { 
margin: 0 0 22px 52px; 
} 

#float-cta img { 
float:left; 
margin: 0 9px 0 0; 
}

我會一整天回答任何問題，並在先進的感謝。

來源

2012-01-20 daniel blythe

我實際上聯繫了Bigspotteddog，他/她對我的查詢非常有幫助，併爲此問題提供了一個解決方案。修正可以在這裏看到：

感謝您的稱讚。我找到了解決您遇到的問題的解決方法。我不認爲這個插件對絕對定位的元素效果很好，因爲它使用絕對本身。

下面是一個說明解決辦法小提琴：http://jsfiddle.net/duUCD/1/（這小提琴不再工作）

下面是所做的更改：

從scrollToFixed通話中移除的marginTop：
```
$('#float-cta').scrollToFixed(); 
```
在您的＃float-cta內部放置一個內容包裝（＃float-cta-contents）以創建所需的margin-top：
```
<div id="float-cta"> 
    <div id="float-cta-contents"> 
    ... 
```

修改CSS來此：

#float-cta { 
    float: right; 
    margin-right:39px; 
    font-family: AlwynNewRegular; 
    font-size: 24px; 
} 

#float-cta-contents { 
    width:322px; 
    height:395px; 
    margin-top: 30px; 
    background-color:#00853e; 
    color:#FFFFFF; 
    padding: 16px; 
}

來源

2012-01-23 09:56:00

所以這個問題是很老，但問題依然存在。以前提供的解決方案只是針對該特定情況的解決方法。

一個通用的解決方案是這樣的：

//Scroll to fixed sidebar 
    $("#fixed-sidebar-wrapp").scrollToFixed(); 

    //Remove mystery div 
    $("#fixed-sidebar-wrapp").next().remove();

假設沒有什麼的內容後修復。

<div id="something"> 
... 
</div> 
<div id="sidebar"> 
    <div id="fixed-sidebar-wrapp"> 
    <div id="sidebar-content"> 
     ... 
    </div> 
    </div> 
    <!-- Mystery div will appear here --> 
</div> <!-- end sidebar --> 
<div id="more-content"> <!-- This will be unaffected by the .remove() -->

如果你有固定的內容後有東西，你必須相應地調整jquery當然。

來源

2015-06-01 08:41:57 bortran

偉大的解決方案。我想知道使用div，因爲刪除它似乎不會影響任何東西。 – tataogg

ScrollToFixed插件創建神祕的div，廢墟頁面佈局？

回答

相關問題