使用 css 和 js 更改滾動時的按鈕移動

Question

我已經嘗試了很多並且已經到達這里。 我不明白發生了什么問題。 我失蹤的地方。 請注意。 當我們向下滾動時，我希望按鈕請求提案將其位置形式從水平更改為垂直。我希望 css 類 .vertical-pos 和 .head__get-in-touch-wrap 按功能更改。 提前致謝

 $(function() { var span = $(".head__get-in-touch-wrap"); $(window).scroll(function() { var scroll = $(window).scrollTop(); if (scroll >= 50) { span.removeClass('head__get-in-touch-wrap').addClass("vertical-pos"); } else { span.removeClass("vertical-pos").addClass('head__get-in-touch-wrapr'); } }); });

 html, body { height: 100%; -webkit-font-smoothing: subpixel-antialiased; } body { background: white; display: block; margin: 0px; } .main-menu { float: right; padding-top: 2%; padding-right: 5%; padding-left: 0; margin: -90px 235px 0 0 !important; list-style: none; transition: opacity .6s 2.5s; font-weight: 700; } .navbar--inverted .main-menu__item { color: #000; } .main-menu__item { display: inline-block; margin: 0 10px; font: 400 15px/20px 'Oswald',sans-serif; letter-spacing: .5px; word-spacing: 1px; text-transform: uppercase; color: #fff; transition: opacity .3s ease-in-out; -webkit-font-smoothing: antialiased; -moz-osx-font-smoothing: grayscale; } .main-menu__item--request { border:1px solid black; cursor:pointer; display:inline-block; margin-right:0; padding:15px 30px; } .main-menu__item > a { color:black; text-decoration:none; font-weight: 700; } a { background-color:transparent; text-decoration:none; } a:active, a:hover { outline:0; color:#C1C1C1; } .menu-toggle { position: absolute; right: 4%; display: none; width: 44px; height: 56px; background: 0 0; cursor: pointer; -webkit-tap-highlight-color: rgba(0,0,0,0); -webkit-touch-callout: none; -webkit-user-select: none; border: 0 none; padding: 4% 0 20px 20px; z-index: 1; align-items: flex-start; } .menu-toggle:hover{ color:#C1C1C1; } .logo{ margin:20px; } .main-block__line { background:#171717; display:none; height:5px; left:5%; margin-left:15px; position:absolute; top:550px; width:20px; z-index:10; } .head__menu-btn__wrap { display:block; margin:-25px -40px 0 0; position:fixed; right:5%; top:47px; width:226px; z-index:999; }.head__menu-btn { -webkit-transition:all 0.1s ease; background-image:url(../pixster/menu-btn.png); background-position:0 0; background-repeat:no-repeat; background-size:45px 45px; cursor:pointer; display:block; height:45px; position:absolute; right:0; top:0; transition:all 0.1s ease; width:45px; z-index:999; } .head__get-in-touch-wrap { -webkit-transform-origin:203px 23px 0 !important; -webkit-transition-duration:0.5s!important ; -webkit-transition-timing-function:cubic-bezier(0.39, -0.16, 0.4, 1.21)!important ; display:block; height:45px; left:0; position:absolute !important; top:0; transform-origin:203px 23px 0; transition-duration:0.5s; transition-timing-function:cubic-bezier(0.39, -0.16, 0.4, 1.21); width:146px; } .vertical-pos{ -webkit-transform: rotate(-90deg); -ms-transform: rotate(-90deg); transform: rotate(-90deg); } .head__get-in-touch { -webkit-transition:all 0.1s ease; background-color:#0072F6; border:none; color:#FFFFFF; display:block; font-size:12px; font-weight:600; letter-spacing:2.5px; margin-top:0; padding:15px 0; text-align:center; text-transform:uppercase; transition:all 0.1s ease; width:146px; }

 <header class="logo"> <img src="../pixster/logo.png" alt="Pixster Studio" /> </header> <span class="main-block__line"> </span> <div class="head__menu-btn__wrap"> <span class="head__menu-btn open-main-menu-button"> </span> <span class="head__get-in-touch-wrap"> <a href="/contact" class="head__get-in-touch">Request a proposal</a> </span> </div> <ul class="main-menu in-view"> <li class="main-menu__item"><a href="/about">About</a></li> <li class="main-menu__item"><a href="/services">Services</a></li> <li class="main-menu__item"><a href="/work">Work</a></li> <li class="main-menu__item"><a href="/blog/">Blog</a></li> <li class="main-menu__item"><a href="/contact">Contact</a></li> </ul> <button data-menu-button="" type="button" class="menu-toggle"> <span class="menu-toggle__lines"></span> </button>

Answer 1

見小提琴： http : //jsfiddle.net/sachinkk/p3x9k67d/

將css更改為：

.head__get-in-touch-wrap {
    display: inline-block;
  -webkit-transform-origin:203px 23px 0 !important;
  -webkit-transition-duration:0.5s!important ;
  -webkit-transition-timing-function:cubic-bezier(0.39, -0.16, 0.4, 1.21)!important ;
  display:block;
  height:45px;
  left:0;
  position:absolute !important;
  top:0;
  transform-origin:203px 23px 0;
  transition-duration:0.5s;
  transition-timing-function:cubic-bezier(0.39, -0.16, 0.4, 1.21);
  width:146px;  
}

JS到：

$(function() {

    var span = $(".head__get-in-touch-wrap");
    $(window).scroll(function() {
        var scroll = $(window).scrollTop();

        if (scroll >= 10) {
           span.addClass("vertical-pos");
        } else {
          span.removeClass("vertical-pos");
        }
    });
});

片段代碼：忽略

 $(function() { var span = $(".head__get-in-touch-wrap"); $(window).scroll(function() { var scroll = $(window).scrollTop(); if (scroll >= 10) { span.addClass("vertical-pos"); } else { span.removeClass("vertical-pos"); } }); });

 html, body { height: 100%; -webkit-font-smoothing: subpixel-antialiased; } body { background: white; display: block; margin: 0px; } .main-menu { float: right; padding-top: 2%; padding-right: 5%; padding-left: 0; margin: -90px 235px 0 0 !important; list-style: none; transition: opacity .6s 2.5s; font-weight: 700; } .navbar--inverted .main-menu__item { color: #000; } .main-menu__item { display: inline-block; margin: 0 10px; font: 400 15px/20px 'Oswald',sans-serif; letter-spacing: .5px; word-spacing: 1px; text-transform: uppercase; color: #fff; transition: opacity .3s ease-in-out; -webkit-font-smoothing: antialiased; -moz-osx-font-smoothing: grayscale; } .main-menu__item--request { border:1px solid black; cursor:pointer; display:inline-block; margin-right:0; padding:15px 30px; } .main-menu__item > a { color:black; text-decoration:none; font-weight: 700; } a { background-color:transparent; text-decoration:none; } a:active, a:hover { outline:0; color:#C1C1C1; } .menu-toggle { position: absolute; right: 4%; display: none; width: 44px; height: 56px; background: 0 0; cursor: pointer; -webkit-tap-highlight-color: rgba(0,0,0,0); -webkit-touch-callout: none; -webkit-user-select: none; border: 0 none; padding: 4% 0 20px 20px; z-index: 1; align-items: flex-start; } .menu-toggle:hover{ color:#C1C1C1; } .logo{ margin:20px; } .main-block__line { background:#171717; display:none; height:5px; left:5%; margin-left:15px; position:absolute; top:550px; width:20px; z-index:10; } .head__menu-btn__wrap { display:block; margin:-25px -40px 0 0; position:fixed; right:5%; top:47px; width:226px; z-index:999; }.head__menu-btn { -webkit-transition:all 0.1s ease; background-image:url(../pixster/menu-btn.png); background-position:0 0; background-repeat:no-repeat; background-size:45px 45px; cursor:pointer; display:block; height:45px; position:absolute; right:0; top:0; transition:all 0.1s ease; width:45px; z-index:999; } .head__get-in-touch-wrap { display: inline-block; -webkit-transform-origin:203px 23px 0 !important; -webkit-transition-duration:0.5s!important ; -webkit-transition-timing-function:cubic-bezier(0.39, -0.16, 0.4, 1.21)!important ; display:block; height:45px; left:0; position:absolute !important; top:0; transform-origin:203px 23px 0; transition-duration:0.5s; transition-timing-function:cubic-bezier(0.39, -0.16, 0.4, 1.21); width:146px; } .vertical-pos{ -webkit-transform: rotate(-90deg); -ms-transform: rotate(-90deg); transform: rotate(-90deg); } .head__get-in-touch { -webkit-transition:all 0.1s ease; background-color:#0072F6; border:none; color:#FFFFFF; display:block; font-size:12px; font-weight:600; letter-spacing:2.5px; margin-top:0; padding:15px 0; text-align:center; text-transform:uppercase; transition:all 0.1s ease; width:146px; }

 <script src="https://ajax.googleapis.com/ajax/libs/jquery/2.1.1/jquery.min.js"></script> <header class="logo"> <img src="../pixster/logo.png" alt="Pixster Studio" /> </header> <span class="main-block__line"> </span> <div class="head__menu-btn__wrap"> <span class="head__menu-btn open-main-menu-button"> </span> <span class="head__get-in-touch-wrap"> <a href="/contact" class="head__get-in-touch">Request a proposal</a> </span> </div> <ul class="main-menu in-view"> <li class="main-menu__item"><a href="/about">About</a></li> <li class="main-menu__item"><a href="/services">Services</a></li> <li class="main-menu__item"><a href="/work">Work</a></li> <li class="main-menu__item"><a href="/blog/">Blog</a></li> <li class="main-menu__item"><a href="/contact">Contact</a></li> </ul> <button data-menu-button="" type="button" class="menu-toggle"> <span class="menu-toggle__lines"></span> </button>

Answer 2

嘗試在 span 中添加一個 id 屬性，以便您可以更清楚地訪問它，更改類時該 id 保持不變

<span class="head__get-in-touch-wrap" id="foo">

還使用 on() 將滾動事件附加到窗口：

var span = $("#foo");
$(window).on("scroll", function() {
    var scroll = $(window).scrollTop();
    if (scroll >= 50) {
       span.removeClass('head__get-in-touch-wrap').addClass("vertical-pos");
    } else {
      span.removeClass("vertical-pos").addClass('head__get-in-touch-wrapr');
    }
});