Скрыть одну кнопку - затем показать другую, но скрыть оригинал с помощью jQuery - PullRequest
Новая
       18

Скрыть одну кнопку - затем показать другую, но скрыть оригинал с помощью jQuery

0 голосов
/ 16 мая 2018

Я знаю, как добавить классы при прокрутке с помощью jQuery, но я застрял на том, как скрыть одну целую кнопку, а затем показать другую при> 423 при прокрутке, например.Я хочу сначала показать свою кнопку регистрации, а затем показать мою бесплатную пробную кнопку при прокрутке.Я искал ответы, которые, казалось, были почти тем, что я хочу, но не совсем то, что я хочу. 

$(window).scroll(function() {
  if ($(document).scrollTop() > 423) {
    $('nav').addClass('navbar-padding');
  } else {
    $('nav').removeClass('navbar-padding');
  }
});
        <script src="https://ajax.googleapis.com/ajax/libs/jquery/2.1.1/jquery.min.js"></script>
        <link rel="stylesheet" href="https://maxcdn.bootstrapcdn.com/font-awesome/4.7.0/css/font-awesome.min.css">
        <link href="https://maxcdn.bootstrapcdn.com/bootstrap/4.0.0-beta.3/css/bootstrap.min.css" rel="stylesheet">
 <script src="https://stackpath.bootstrapcdn.com/bootstrap/4.1.0/js/bootstrap.bundle.min.js" integrity="sha384-lZmvU/TzxoIQIOD9yQDEpvxp6wEU32Fy0ckUgOH4EIlMOCdR823rg4+3gWRwnX1M" crossorigin="anonymous"></script>  



<nav class="navbar navbar-default fixed-top navbar-toggleable-md navbar-light bg-faded">
 <div class="container-fluid" style="margin-bottom:900px;">
<ul class="nav nav-pills right-nav">
<li class="nav-item">
<a class="nav-link" href="#">Sign In</a>
</li>
<li>
<button id="hide-show-cta" class="outline" href="change-driving-test">Free Trial</button>
</li> 
</ul>
</div>
</div>

1 Ответ

0 голосов
/ 16 мая 2018

Вы можете либо:

  • Сделайте .show() и / или .hide() на двух кнопках в нужном месте прокрутки.
  • Добавить / удалить классы CSS для кнопок (чтобы показать и скрыть их) в нужном месте прокрутки.

Что-то вроде: 

$(window).scroll(function() {
    if ($(document).scrollTop() > 423) {
        $("#signin").hide();
        $("#trial").show();
    } else {
        $("#signin").show();
        $("#trial").hide();
    }
});

Вот рабочий пример: https://jsfiddle.net/wmax30an/

Просто знайте, что это довольно просто. У него также есть проблема, когда он запускает эти действия скрытия / показа при каждой прокрутке, поэтому вы можете захотеть добавить что-нибудь, чтобы предотвратить это.

...