捲動頁面時logo從中間移去左邊

作法:

1、用Elementor拉一個段,裡面自製一個logo與menu,並把這個段用CSS固定在最上方。

.fix{
position:fixed;
top:0px;
width:100%;
z-index: 100;
}

2、logo 與 menu 的進階編輯各給他一個id。

3、下方任意處(或與選單放在一個段中也可),拉一個html元素,裡面放如下方的語法:

<script>
onscroll = function() {
var scrollTop = document.documentElement.scrollTop || document.body.scrollTop|| 0;
if (scrollTop > 20) {
document.getElementById("_logo").style.display = "inline-block";
document.getElementById("_menu").style.display = "inline-block";
} 
else {
document.getElementById("_logo").style.display = "block";
document.getElementById("_menu").style.display = "block";
}};
</script>

語法中的「20」,是指捲動了20px後才觸發,也可以自行再修改數字。

注意看本頁上方的logo與選單的位置,在捲動頁面會產生變化。(捲動頁面時logo從中間移去左邊)

以上由小訣學院示範