3

我正在尝试使用 CSS 和 JavaScript 创建一个 3D 功能区。

需要的主要功能是：

  1. 功能区应使用粘性滚动方法。即在页面滚动时从底部移动到顶部，然后固定在顶部。
  2. 功能区中的 3D 效果，它改变了它在滚动时的视角

我已经创建了效果，这是演示页面：http ://staging.xhtml-lab.com/ribbon/

您可以使用查看源代码查看代码，JS在页面底部。

但它有一些错误，我无法修复并寻求帮助：

  1. 角（三角形）在滚动时没有正确移动
  2. 如果我慢慢滚动它工作正常，但一切都搞砸了快速滚动
  3. 如果我向下滚动并刷新页面，功能区会向下移动并且计算会混乱。

我正在寻求帮助来解决这些问题。

以下是JS代码：

        $(document).ready(function() {

            var docHeight = $(window).height();
            var ribbonOffsetTop = 200;
            var ribbonOffsetBottom = 50;
            var initialPosition = parseInt($('#ribbon').css('top'));
            var lastScrollTop = 0;

            var ribbonHeight = 74;
            var availableScroll = docHeight-ribbonOffsetTop-ribbonOffsetBottom;
            var step = availableScroll/34;
            var remainingScroll = availableScroll-step;
            var stepsMoved = 0;

            console.log(availableScroll);

            $(window).scroll(function() {
                var st = $(this).scrollTop();

                if (st > lastScrollTop){
                    // downscroll code - Ribbon moving up
                    if (parseInt($('#ribbon').css('top')) > ribbonOffsetTop) {
                        $('#ribbon').css('top', initialPosition - parseInt(st));

                        var scrollingPosition = docHeight-st-ribbonOffsetTop-ribbonOffsetBottom;
                        if(remainingScroll > scrollingPosition) {
                            remainingScroll -= step;

                            $('.ribbon-front').css("top", $('.ribbon-front').position().top - 1);

                            if(stepsMoved < 17) {
                                $('.ribbon-edge-innerleft, .ribbon-edge-outerleft').css("border-width", (17 - stepsMoved)+"px 26px 0 0");
                                $('.ribbon-edge-innerright, .ribbon-edge-outerright').css("border-width", (17 - stepsMoved)+"px 0 0 26px");
                                $('.ribbon-edge-outerleft, .ribbon-edge-outerright').css("top", stepsMoved-34);
                            } else {
                                $('.ribbon-edge-innerleft, .ribbon-edge-innerright').css("top", stepsMoved -17);
                                $('.ribbon-edge-outerleft, .ribbon-edge-outerright').css("top", "23px");
                                $('.ribbon-edge-innerleft, .ribbon-edge-outerleft').css("border-width", "0px 26px "+(stepsMoved - 17)+"px 0");
                                $('.ribbon-edge-innerright, .ribbon-edge-outerright').css("border-width", "0px 0 "+(stepsMoved - 17)+"px 26px");
                            }
                            stepsMoved ++;
                        }
                    }
                } else if (st < lastScrollTop ) {
                    // upscroll code - Ribbon moving down
                    if (parseInt($(this).scrollTop()) <= docHeight-ribbonOffsetTop-ribbonOffsetBottom) {
                        $('#ribbon').css('top', (docHeight-parseInt(st))-ribbonHeight);

                        var scrollingPosition = docHeight-st-ribbonOffsetTop-ribbonOffsetBottom;

                        if(remainingScroll < scrollingPosition) {
                            remainingScroll += step;

                            $('.ribbon-front').css("top", $('.ribbon-front').position().top + 1);

                            if(stepsMoved > 17) {
                                $('.ribbon-edge-innerleft, .ribbon-edge-outerleft').css("border-width", "0px 26px "+(stepsMoved - 17)+"px 0");
                                $('.ribbon-edge-innerright, .ribbon-edge-outerright').css("border-width", "0px 0 "+(stepsMoved - 17)+"px 26px");
                            } else {
                                $('.ribbon-edge-innerleft, .ribbon-edge-innerright').css("top", stepsMoved -17);
                                $('.ribbon-edge-outerleft, .ribbon-edge-outerright').css("top", "23px");
                                $('.ribbon-edge-innerleft, .ribbon-edge-outerleft').css("border-width", (17 - stepsMoved)+"px 26px 0 0");
                                $('.ribbon-edge-innerright, .ribbon-edge-outerright').css("border-width", (17 - stepsMoved)+"px 0 0 26px");
                                $('.ribbon-edge-outerleft, .ribbon-edge-outerright').css("top", stepsMoved-34);
                            }
                            stepsMoved --;
                        }
                    }
                }
                lastScrollTop = st;
            });

        });
4

0 回答 0