Q&A

안녕하세요, 완전 초보자라서 이것저것 찾아보면서 웹사이트를 만들고있는데 하면 할수록 문제가 많이 생기네요..

다름이 아니고 스크롤다운시에 사이드메뉴도 같이 스크롤 다운되는 기능을 넣고싶어서

헤더스크립트에

<script src=" http://code.jquery.com/jquery-1.11.2min.js"></script>

<script>

$(function() {

    var $window = $(window);
    var lastScrollTop = $window.scrollTop();
    var wasScrollingDown = true;

    var $sidebar = $("#sidebar");
    if ($sidebar.length > 0) {

        var initialSidebarTop = $sidebar.position().top;

        $window.scroll(function(event) {

            var windowHeight = $window.height();
            var sidebarHeight = $sidebar.outerHeight();

            var scrollTop = $window.scrollTop();
            var scrollBottom = scrollTop + windowHeight;

            var sidebarTop = $sidebar.position().top;
            var sidebarBottom = sidebarTop + sidebarHeight;

            var heightDelta = Math.abs(windowHeight - sidebarHeight);
            var scrollDelta = lastScrollTop - scrollTop;

            var isScrollingDown = (scrollTop > lastScrollTop);
            var isWindowLarger = (windowHeight > sidebarHeight);

            if ((isWindowLarger && scrollTop > initialSidebarTop) || (!isWindowLarger && scrollTop > initialSidebarTop + heightDelta)) {
                $sidebar.addClass('fixed');
            } else if (!isScrollingDown && scrollTop <= initialSidebarTop) {
                $sidebar.removeClass('fixed');
            }

            var dragBottomDown = (sidebarBottom <= scrollBottom && isScrollingDown);
            var dragTopUp = (sidebarTop >= scrollTop && !isScrollingDown);

            if (dragBottomDown) {
                if (isWindowLarger) {
                    $sidebar.css('top', 0);
                } else {
                    $sidebar.css('top', -heightDelta);
                }
            } else if (dragTopUp) {
                $sidebar.css('top', 0);
            } else if ($sidebar.hasClass('fixed')) {
                var currentTop = parseInt($sidebar.css('top'), 10);
                
                var minTop = -heightDelta;
                var scrolledTop = currentTop + scrollDelta;
                
                var isPageAtBottom = (scrollTop + windowHeight >= $(document).height());
                var newTop = (isPageAtBottom) ? minTop : scrolledTop;
                
                $sidebar.css('top', newTop);
            }

            lastScrollTop = scrollTop;
            wasScrollingDown = isScrollingDown;
        });
    }
});</script>

라고 입력하니 게시판 목록 썸네일이 안보이더라구요.. 

여러군데 찾아보니 라이브러리가 충돌해서 생기는 문제인 것 같아 

<script type="text/javascript">
window.jQuery1_11_2 = jQuery.noConflict(true);
</script>

를 넣으니 썸네일은 다시 나오는데 사이드바 스크롤다운되는 기능은 또 안되더라고요..

 

이 문제 어떻게 해결하는지 아시는 분 계시나요? 

감사합니다.

 

댓글 2

  • jQuery는 코어에 기본으로 포함되어 있기 때문에 다시 로딩할 필요가 없을 텐데요? jQuery를 중복으로 로딩하면 여러 가지 문제가 생깁니다. 예전에 로딩한 플러그인들이 작동하지 않는다든지...

     

    꼭 중복으로 로딩해야 한다 하더라도, https://code.jquery.com/jquery-1.11.2min.js 경로에는 파일이 없네요. 2와 min 사이에 점이 들어가야 하는 것 같은데...

  • 답변주셔서 감사합니다! 제가 글을 올릴때 점을 빼먹고 올렸네요 ^^; 스크롤다운하는 소스가 jQeury를 로딩하지 않으면 작동을 하지 않더라고요.. 그래서 어쩔수 없이 https://code.jquery.com/jquery-1.11.2.min.js를 로딩했는데 문제가 생겨요. 다른 버전의 jQuery건 다른 파일주소로 로딩하건 다 문제가 생기는 것 같아요. 이상하게 게시글 밑 목록의 썸네일은 나오는데 카테고리페이지?의 게시판목록 썸네일은 나오질않아요. 다른 방법을 찾아봐야 할런지..