某網站滾動％後的浮動div

我真的不知道從哪裏開始搜索。說實話，我甚至不知道如何搜索，因爲我不知道它是如何調用的。（也許平視？但我得到的是汽車改裝的東西）某網站滾動％後的浮動div

什麼我找了附加形象。當用戶滾動一定比例的網站時，會顯示一條消息。當將鼠標懸停在消息上時，它會展開。我想要做一些附加的圖像。

難道有誰知道在哪裏可以搜索？什麼？

希望有人能幫助我。

問候康斯坦丁

at the bottom right is the div

mouse over, expands the div

來源

2016-09-17 Fly Guy

http://jsfiddle.net/tjbaezid/d010s4rg/也許這會幫助你。 –

歡迎來到Stack Overflow！你的問題對於直接回答來說太寬泛了，所以很可能需要關閉。然而，您所描述的想法可以使用CSS動畫和JavaScript來實現。爲'onscroll'事件創建一個JS事件偵聽器，並在跨越閾值時觸發CSS動畫。爲了使消息「增長」，應該有一個簡單的CSS「懸停」狀態。 –

或者喲只能使用CSS


 

 
#div1{ 
 
height:50px; 
 
overflow:hidden; 
 
} 
 
#div1:hover{ 
 
height:300px; 
 

 
    -moz-transition: .4s all ease-in-out; 
 
    -ms-transition: .4s all ease-in-out; 
 
    -webkit-transition: .4s all ease-in-out; 
 
    -o-transition: .4s all ease-in-out; 
 
}

<div id="div1"> 
 
Lorem ipsum dolor sit amet, consectetur adipisici elit, sed eiusmod tempor incidunt ut labore et dolore magna aliqua. Ut enim ad minim veniam, quis nostrud exercitation ullamco laboris nisi ut aliquid ex ea commodi consequat. Quis aute iure reprehenderit in voluptate velit esse cillum dolore eu fugiat nulla pariatur. Excepteur sint obcaecat cupiditat non proident, sunt in culpa qui officia deserunt mollit anim id est laborum. 
 

 
Duis autem vel eum iriure dolor in hendrerit in vulputate velit esse molestie consequat, vel illum dolore eu feugiat nulla facilisis at vero eros et accumsan et iusto odio dignissim qui blandit praesent luptatum zzril delenit augue duis dolore te feugait nulla facilisi. Lorem ipsum dolor sit amet, consectetuer adipiscing elit, sed diam nonummy nibh euismod tincidunt ut laoreet dolore magna aliquam erat volutpat. 
 

 
Ut wisi enim ad minim veniam, quis nostrud exerci tation ullamcorper suscipit lobortis nisl ut aliquip ex ea commodo consequat. Duis autem vel eum iriure dolor in hendrerit in vulputate velit esse molestie consequat, vel illum dolore eu feugiat nulla facilisis at vero eros et accumsan et iusto odio dignissim qui blandit praesent luptatum zzril delenit augue duis dolore te feugait nulla facilisi. 
 
</div>

來源

2016-09-17 14:38:29

#div1 { 
 
    height: 50px; 
 
    overflow: hidden; 
 
    transition: .4s all ease-in-out; 
 
} 
 
#div1:hover { 
 
    height: 300px; 
 
}

<div id="div1"> 
 
Lorem ipsum dolor sit amet, consectetur adipisici elit, sed eiusmod tempor incidunt ut labore et dolore magna aliqua. Ut enim ad minim veniam, quis nostrud exercitation ullamco laboris nisi ut aliquid ex ea commodi consequat. Quis aute iure reprehenderit in voluptate velit esse cillum dolore eu fugiat nulla pariatur. Excepteur sint obcaecat cupiditat non proident, sunt in culpa qui officia deserunt mollit anim id est laborum. 
 

 
Duis autem vel eum iriure dolor in hendrerit in vulputate velit esse molestie consequat, vel illum dolore eu feugiat nulla facilisis at vero eros et accumsan et iusto odio dignissim qui blandit praesent luptatum zzril delenit augue duis dolore te feugait nulla facilisi. Lorem ipsum dolor sit amet, consectetuer adipiscing elit, sed diam nonummy nibh euismod tincidunt ut laoreet dolore magna aliquam erat volutpat. 
 

 
Ut wisi enim ad minim veniam, quis nostrud exerci tation ullamcorper suscipit lobortis nisl ut aliquip ex ea commodo consequat. Duis autem vel eum iriure dolor in hendrerit in vulputate velit esse molestie consequat, vel illum dolore eu feugiat nulla facilisis at vero eros et accumsan et iusto odio dignissim qui blandit praesent luptatum zzril delenit augue duis dolore te feugait nulla facilisi. 
 
</div>

修改@穆斯塔法的代碼了一下，你也可以有一個平穩過渡回來。

此外，transition property不會在最新版本的所有主要的瀏覽器需要prefixes。

來源

2016-09-18 00:55:04 StardustGogeta

冷靜，非常感謝你的傢伙....

*編輯：但什麼是代碼，使其出現在頁面的右下角被粘？ - 我的意思是，當我滾動頁面仍然在右下角......

來源

2016-09-18 05:28:13

某網站滾動％後的浮動div

回答

相關問題