0

这是我的第一篇文章，但我是一个长期的观众。希望有人可以提供帮助 - 这个人一直让我发疯，我已经尝试并试图找到答案但无济于事。

基本上，我正在用一些风格的滚动元素更新朋友的网站。我选择了 SuperScrollorama，因为它看起来非常棒，尽管我已经准备好接受它对于我想要实现的目标来说完全是矫枉过正。无论如何，我对 SuperScrollorama 真的很感兴趣，所以我想我部分选择它只是为了尝试使用它！

无论如何，我试图实现的想法包括：

单页网站，其中第一部分只是一个居中的大（650 像素宽度）图像和一个<ul>居中并固定在包含 6 个<li>元素的页面顶部的导航菜单。

在向下滚动时，我希望图像缩小到 250px 宽度，并且我想在第三个和第四个之间留出 250px 的空间，<li>以便缩小的图像滚动到然后在滚动期间保持不变。我正在尝试通过向第三个添加边距来创建空间<li>。（我很欣赏这可能会给我带来不良的副作用，一个是它不会完全居中。这里也欢迎提出建议！我即将描述的问题，但是，我在尝试基于浮动的其他方法时也遇到过并使用两个单独的 div，因此 margin-right 本身似乎不是根本原因）

现在，我已经设法让图像缩小并将其附加到页面顶部而没有太多麻烦。

我遇到的问题是margin-right。在页面加载时，它<ul>看起来居中并均匀分布，正如我想要的那样。第三个的 margin-right 值为<li>0。但是，在最小的滚动事件之后，该值从 0 跳到 89px。继续滚动按需要工作，但在向上滚动时，边距返回到 89px，然后停止。

这是我得到的代码：

HTML：

<body>
<nav>
        <ul>
            <li><a href="#home">HOME</a></li>
            <li><a href="#programme">PROGRAMME</a></li>
            <li id="grow_margin"><a href="#tickets">TICKETS</a></li>
            <li><a href="#menu">MENU</a></li>
            <li><a href="#venue">VENUE</a></li>
            <li><a href="#faq">FAQ</a></li>
        </ul>   

</nav>

<header id="fix-it">

    <h1><img id="scale-it" src="/images/logo.png" />TITLE</h1>

</header>

CSS：

html {
height: 100%;
width: 100%;
}

body {
    height: 100%;
    width: 100%;
}

nav {
position: fixed;
top: 0;
width: 100%;
height: 5%;
text-align: center;
}



nav ul {
list-style: none;
height: 100%;
}

nav ul li {
display: inline-block;
height: 100%;
}

nav ul li a {
color:#bbbbbb;
text-decoration: none;
margin: 8px;
}

header {
width: 100%;
position: fixed;
}

header h1 {
width: 100%;
text-align: center;
margin: 0;
padding: 0;
}

和 JS：

<script>
    $(document).ready(function() {
        var controller = $.superscrollorama({
        reverse: true
    });
        var windowHeight=window.innerHeight;
        var scrollDuration = windowHeight; 

        controller.addTween('#grow_margin', 
            TweenMax.to( $('#grow_margin'), .25, {css:{'margin-right':'250px'}, immediateRender:true}), scrollDuration);
        controller.addTween('#scale-it', 
            TweenMax.fromTo( $('#scale-it'), .25, {css:{width:'650px'}, immediateRender:true, ease:Quad.easeInOut}, {css:{width:'250px'}, ease:Quad.easeInOut}), 
            scrollDuration);
        controller.addTween('#fix-it', 
            TweenMax.fromTo( $('#fix-it'), .25, {css:{top:'40%'}, immediateRender:true, ease:Quad.easeInOut}, {css:{top:'4'}, ease:Quad.easeInOut}), 
            scrollDuration);    
    });

</script>

任何帮助将不胜感激！它快把我逼疯了！

谢谢！

抢

4

0 回答 0