Test in JQuery if an element is at the top of screen

后端 未结 5 1439
予麋鹿
予麋鹿 2020-12-23 11:42

I have a div that is positioned about 100px from the top of the browser window. When the user scrolls down, I want the div to stay where it is

5条回答
  •  無奈伤痛
    2020-12-23 12:22

        $(document).ready(function(){  
        var $doc           = $(document);
        var position       = 0;
        var top = $doc.scrollTop();         // 현재 스크롤바 위치  
        var screenSize     = 0;             // 화면크기  
        var halfScreenSize = 0;             // 화면의 반  
    
        /* 사용자 설정 값 시작 */  
        var pageWidth      = 1000;          // 페이지 폭, 단위:px  
        var leftOffet      = 409;           // 중앙에서의 폭(왼쪽 -, 오른쪽 +), 단위:px  
        var leftMargin     = 909;           // 페이지 폭보다 화면이 작을때 옵셋, 단위:px, leftOffet과 pageWidth의 반만큼 차이가 난다.  
        var speed          = 1500;          // 따라다닐 속도 : "slow", "normal", or "fast" or numeric(단위:msec)  
        var easing         = 'swing';       // 따라다니는 방법 기본 두가지 linear, swing  
        var $layer         = $('#quick');   // 레이어 셀렉팅  
        var layerTopOffset = 140;           // 레이어 높이 상한선, 단위:px  
        $layer.css('z-index', 10);          // 레이어 z-인덱스  
        /* 사용자 설정 값 끝 */
    
        // 좌우 값을 설정하기 위한 함수  
        function resetXPosition()  
        {  
            $screenSize = $('#contact').width();            // 화면크기  
            halfScreenSize = $screenSize / 2;               // 화면의 반 
            xPosition = halfScreenSize + leftOffet;  
            if ($screenSize < pageWidth)
                xPosition = leftMargin;
            $layer.css('left', xPosition);  
        }  
    
    
        // 스크롤 바를 내린 상태에서 리프레시 했을 경우를 위해  
        if (top > 0 )  
            $doc.scrollTop(layerTopOffset+top);  
        else  
            $doc.scrollTop(0);  
    
        // 최초 레이어가 있을 자리 세팅  
        $layer.css('top',layerTopOffset);  
        resetXPosition();  
    
        // 윈도우 크기 변경 이벤트가 발생하면  
        $(window).resize(resetXPosition);  
    
        // 스크롤이벤트가 발생하면  
        $(window).scroll(function(){  
            yPosition = $doc.scrollTop() + layerTopOffset;  
            $layer.animate({"top":yPosition }, {duration:speed, easing:easing, queue:false});  
        });  
    });
    

提交回复
热议问题