Skip to content
New issue

Have a question about this project? Sign up for a free GitHub account to open an issue and contact its maintainers and the community.

By clicking “Sign up for GitHub”, you agree to our terms of service and privacy statement. We’ll occasionally send you account related emails.

Already on GitHub? Sign in to your account

Basic Stellar Scroll example not working #120

Open
axebox opened this issue Feb 23, 2015 · 2 comments
Open

Basic Stellar Scroll example not working #120

axebox opened this issue Feb 23, 2015 · 2 comments

Comments

@axebox
Copy link

axebox commented Feb 23, 2015

This should be pretty straight forward, but Stellar is not animating #logo a on scroll. It initializes it and sets the top: 0px on the DOM element but does nothing on window.scroll.

I've got js dependencies ordering fine and there are no JS errors. #marquee is relative, #logo is absolute and #logo a is relative.

I really don't know what else I can do here. Any ideas?

<div id="marquee" class="header-marquee-logo-wrapper" data-stellar-offset-parent="true">
            <h1 id="logo" class="header-marquee-logo">
              <a href="/" data-stellar-ratio="0.5">The Official Blog</a>
            </h1>
</div>

.header-marquee-logo-wrapper {
    width: 100%;
    height: 100%;
    position: relative;
}

.header-marquee-logo {
    text-align: center;
    vertical-align: middle;
    position: absolute;
    top: 50%;
    width: 100%;
    -webkit-transform: translateY(-50%);
    transform: translateY(-50%);
}

.header-marquee-logo a {
    font-family: Gotham-Bold, Arial, Helvetica, sans-serif;
    text-decoration: none;
    color: white;
    font-size: 40px;
    display: block;
    position: relative;
}

  $('#marquee').stellar({
    verticalScrolling: true,
    horizontalScrolling: false,
    verticalOffset: 0
  });
@ghost
Copy link

ghost commented Feb 23, 2015

Documentation claims that we can run Stellar JS on DOM elements, but there are issues with this approach. If an element doesn't have scrollbars, it can't be scrolled and $elem.scrollTop() returns 0.

See here: #119

@axebox
Copy link
Author

axebox commented Feb 23, 2015

I just want a basic variable animation bound to window.scroll. I thought that default example illustrated that pretty clearly.

Sign up for free to join this conversation on GitHub. Already have an account? Sign in to comment
Labels
None yet
Projects
None yet
Development

No branches or pull requests

1 participant