iT邦幫忙

0

捲軸滾動到特定距離,div跟著一起動(偷渡transition問題)

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

  1. 此頁面中捲軸滾動距離>「畫面高度的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});

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

1 個回答

1
ccutmis
iT邦高手 4 級 ‧ 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基本的東西研究一下

看更多先前的回應...收起先前的回應...
chueight iT邦新手 5 級 ‧ 2021-01-24 13:14:36 檢舉

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

ccutmis iT邦高手 4 級 ‧ 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邦高手 4 級 ‧ 2021-01-24 22:07:57 檢舉

不客氣:)

我要發表回答

立即登入回答