捲軸滾動到特定距離，div跟著一起動（偷渡transition問題）

jquery transition

chueight 2021-01-23 18:33:32 ‧ 2096 瀏覽

分享至

直接先上網址 http://0927771122.com/project1/contact.html

此頁面中捲軸滾動距離>「畫面高度的20%」背景的大圖就會新增一個.show的class讓圖片變得亮一些。同時我想讓.big-title這標題「隨著捲軸往下，標題往上」，此效果我用jQery一直寫不出來。以下是我的程式碼Q_Q請各位高手幫幫忙

$(function(){

var eWind = $(window),
	eTitle = $(".big-title");

var tScroll = eWind.scrollTop(),
	hWin = eWind.height(); 

var bTitle = hWin*0.2; 

	if(tScroll >= hWin*0.2){
	bTitle = tScroll
	}
	
	eTitle.css({bottom: bTitle});

})

2.偷渡transition的問題，我的漢堡打開時有吃到transition，收起來的時候卻沒有效果很突然，這也不清楚是什麼原因。

以上，謝謝大家

chueight iT邦新手 5 級 ‧ 2021-01-24 01:32:10 檢舉

我發文後不斷把算式排列組合改成
var eWind = $(window);
eTitle = $(".big-title");

var tScroll = eWind.scrollTop(),
hWin = eWind.height(); //畫面高度
hTitle = eTitle.height();

var bTitle = hWin*0.8 - hTitle; //(起始)

if(tScroll > (hWin*0.2)){
bTitle = - (tScroll - hWin*0.2 ) + hWin*0.7
}

eTitle.css({top: bTitle});

現在這樣大概是我要的樣子，可是有點誤打誤撞，隨便試出來的，不太知道為什麼。

登入發表討論

直播研討會

{{ item.channelVendor }} {{ item.webinarstarted }} |

直播中

1 個回答

ccutmis

iT邦高手 2 級 ‧ 2021-01-24 09:41:45

最佳解答

現在這樣大概是我要的樣子，可是有點誤打誤撞，隨便試出來的，不太知道為什麼。

這個寫法可能有問題可以試試把頁面滾動到底下再回到頂部你會看到big-title的位置跑掉了
這邊提供一個寫法給你參考:

在 main.js裡面把

    function setScroll(){
        var win = $(window);
        var scrollTop = win.scrollTop();
        var winHeight = win.height();
        if(scrollTop > winHeight * 0.2 ){
            $(".header").addClass("bg");
            $(".big-mask").addClass("show");
            $(".scrolltop").addClass("show");
        }else{
            $(".header").removeClass("bg");
            $(".big-mask").removeClass("show");
            $(".scrolltop").removeClass("show");
        }

    }

改成

    function setScroll(){
        var win = $(window);
        var scrollTop = win.scrollTop();
        var winHeight = win.height();
        if(scrollTop > winHeight * 0.2 ){
            $(".header").addClass("bg");
            $(".big-mask").addClass("show");
            $(".scrolltop").addClass("show");
            $('.big-title').css('bottom',scrollTop+'px');
        }else{
            $(".header").removeClass("bg");
            $(".big-mask").removeClass("show");
            $(".scrolltop").removeClass("show");
            $('.big-title').css('bottom','20vh');
        }

    }

就是加2行程式碼而已，看不懂的話拿紙出來畫，有些東西是理解就懂的。
(其實是有點懶得打字說明了XD)
另外你的jquery使用有些問題，
像 main.js contact.js 都放了這個

$(function(){ ... }

又各自定義 setScroll 函式這好嗎這不好
如果它們是在各自的頁面載入使用沒問題但是在同一個頁面先載入main.js再載入contact.js 可能會有定義重複函數的衝突
很多問題都是亂搞搞出來的這能正常work本身就已經是bug了建議重新把一些jquery基本的東西研究一下

回應 4
分享
檢舉

看更多先前的回應...收起先前的回應...

chueight iT邦新手 5 級 ‧ 2021-01-24 13:14:36 檢舉

你好,謝謝你抽空看我寫的東西
晚點我會試試看！ (可以厚臉皮追問我漢堡的問題嗎，收起來的時候怎麼沒有吃到transition樣式阿阿阿）

ccutmis iT邦高手 2 級 ‧ 2021-01-24 14:44:54 檢舉

關於漢堡排的問題，抱歉幫不上忙，這裡提供一個以前整理的純CSS漢堡排範例給您參考(不需要用jquery)

http://www.web3d.url.tw/ITHELP/CSS_20190927/

chueight iT邦新手 5 級 ‧ 2021-01-24 19:12:30 檢舉

謝謝～～～～～～～有您真好

ccutmis iT邦高手 2 級 ‧ 2021-01-24 22:07:57 檢舉

不客氣:)

登入發表回應

我要發表回答

立即登入回答

參賽組數

1064 組

團體組數

40 組

累計文章數

22195 篇

完賽人數

600 人

15th鐵人賽 16th鐵人賽 13th鐵人賽 14th鐵人賽 12th鐵人賽 11th鐵人賽鐵人賽 2019鐵人賽 javascript 2018鐵人賽 python 2017鐵人賽 windows php c# windows server linux css react vue.js

IT邦幫忙