Как показывать div подписку, сделав scroll с jquery?

Я разрабатываю систему подписки электронной почты, но формуляр я хочу добавить это к плавающему ящику.

Как я добиваюсь этого же самого эффекта, этого веб сайта: http://es.wix.com/blog/ используя только jQuery.

Если они могут наблюдать эффект, который обладает плавающим ящиком примера ссылки, сделав scroll, покажи контент подписки:

  • Возможность мочь закрывать плавающий ящик X.
  • Подписав тебя покажи диалоговое окно (Благодаря за подписку).
  • Освежив страницу плавающий ящик подписки не появляется уже.

Как мог бы применяться тот эффект к этому примеру подписки:

$(function() {
  $(window).scroll(function() {
    var scroll = $(window).scrollTop();
    if (scroll >= 50) {
      $("#caja").addClass("entra");
    } else {
      $("#caja").removeClass("entra");
    }
  });
});
#contenedor {
  height: 900px;
}

#caja {
  width: 350px;
  position: fixed;
  padding: 20px;
  max-width: 400px;
  top: 200px;
  right: 0;
  border: solid 1px red;
  transform: translateX(100%);
  transition: all .5s ease;
  -webkit-box-shadow: 0 2px 10px rgba(125,125,125,.2);
  -moz-box-shadow: 0 2px 10px rgba(125,125,125,.2);
  box-shadow: 0 2px 10px rgba(125,125,125,.2);
  border: 1px solid #BBB;
  border: 1px solid rgba(125,125,125,.2);
  border-radius: 5px;
}

#caja .x {
    position: absolute;
    right: 13px;
    top: 9px;
    font-size: 14px;
    color: #222;
}

#caja h1 {
    font-size: 32px;
    color: #333;
    margin: 0;
    text-align: left;
}

#caja h1 i {
    background: url(data:image/png;base64,iVBORw0KGgoAAAANSUhEUgAAACgAAAAXBAMAAACL/BAmAAAABGdBT…h0HuBDUqW+u6yjq+oFEfpAw+p5bL9nzB/zCv+7oz+3+QnbNC75apKiLQAAAABJRU5ErkJggg==);
    height: 23px;
    width: 40px;
    display: inline-block;
    margin-left: 3px;
}

#caja p {
    font-size: 16px;
    line-height: 20px;
    margin: 14px 0 18px 0;
    padding: 0;
}

#caja.entra {
  transform: translateX(0);
}

X

¡Suscríbete al Blog!

¿Quieres recibir los artículos directamente
en tu email? Suscríbete aquí.

Я знаю тему, ранее создал меню навигации используя этот пример https://jsfiddle.net / другие типы эффектов jsfiddle.net, но в этом случае я это наблюдаю что-то сложное.

6
задан 22.10.2016, 02:13
3 ответа

Ты можешь использовать функцию scroll() чтобы обнаруживать, когда ты делаешь scroll и scrollTop() чтобы знать, в котором положение scroll ты находишься, и добавлять класс с оживлением или оживлять это с jQuery.

$(function() {
  $(window).scroll(function() {
    var scroll = $(window).scrollTop();
    if (scroll >= 50) {
      $("#caja").addClass("entra");
    } else {
      $("#caja").removeClass("entra");
    }
  });
});
#contenedor {
  height: 900px;
}

#caja {
  width: 350px;
  position: fixed;
  top: 200px;
  right: 0;
  border: solid 1px red;
  transform: translateX(100%);
  transition: all .5s ease;
}

#caja.entra {
  transform: translateX(0);
}
<script src="https://ajax.googleapis.com/ajax/libs/jquery/1.11.1/jquery.min.js"></script>
<div id="contenedor">
  <div id="caja">Lorem ipsum dolor sit amet, consectetur adipisicing elit. Deserunt neque harum a, cum natus fugit quidem, odio ea. Error ad a placeat omnis tempora nisi rerum, minima earum, sed dolor?</div>
</div>

ОБНОВЛЕНИЕ:

Чтобы знать, была ли введена в компьютер электронная почта и вновь не показывать формуляр могут сохранять стоимость localStorage и снимать класс, который показывает бланк регистрации. Будет возможно улучшать код, моим является больше CSS, но может служить как пример (оно я не функционирует в snippet, так что я помещаю ссылку в jsfiddle):

Demo: https://jsfiddle.net / blonfu / e4y9p4Lu / 4 /

11
ответ дан 24.11.2019, 13:02
  • 1
    @May я издал мой ответ и поместил пример с localStorage. Quiz и # 225; смогите стоить как пункт отправления – blonfu 20.10.2016, 17:04
  • 2
    определите, что у эффекта есть плавающий ящик той p и # 225; gina, в конце вопроса coment и # 233; что я знаю тему, если я работал ранее с scroll. Тогда оставаться и # 237; в две темы не показывания ящика, согласившись в и # 250; n схвати и # 237; освежите или перезагрузите ее p и # 225; gina это podr и # 237; чтобы решать с PHP без проблем. Одинокий оставаться и # 237; в тему, если электронная почта правильна, когда окно di подписывает показывать ящик box и # 225; logo определяя что-то в частности спасибо за соглашение. – May 20.10.2016, 18:19
  • 3
    Но это ты можешь делать это как и я прячу ящик. Tendr и # 237; схвати скрытый блок, который он появляется, когда ты даешь bot и # 243; n посылания – blonfu 20.10.2016, 18:36
  • 4
    в этом ясном чувстве, которое должно быть и # 237; в f и # 225; cil показывать, когда ты даешь bot и # 243; n посылать, но если почта не v и # 225; lido я не хочу показать di и # 225; logo, если не mostar сообщение ошибки в том же плавающем ящике, где находится suscripci и # 243; n, ах и # 237; tambi и # 233; n не быть и # 237; в один согрешите и # 241; или деталь, которая в и # 241; adir bot и # 243; n X в плавающий ящик, чтобы скрывать плавающий ящик. – May 20.10.2016, 18:49
  • 5
    я удаляю мои предыдущие комментарии, потому что сейчас, что твои не est и # 225; n они не имеют смысл. Быть должным и # 237; схвати показывать ты c и # 243; я говорю и выдвигать вопрос об этом. – blonfu 21.10.2016, 11:26

Под которым я понял тебя, и видя заголовок вопроса, я сделал то же самое давно и единственное, что ты должен делать для плавающего эффекта, состоит в том, чтобы использовать в стиле твоего формуляра установленное положение. Только это уже он остается установленным сделай scroll, что ты не сделал без jquery даже никакого другого книжного магазина. В моем случае он использовал этот код:

#formSubscripcion {
	position: fixed;
	left: 10px;
	bottom: 10px;
}

Это оставит тебе установленным элемент 'formSubscripcion' в край 10 pixels нижнего прямого угла. Измени это в твой вкус с % или то, в чем ты будешь нуждаться.

Если твоя проблема состоит в том, чтобы избегать того, чтобы он вышел, подписав тебя, ты можешь делать это снимая объект дерева DOM.

document.removeChild("formSubscripcion");

Ты можешь видеть больше функций и практиковать код и примеры в w3schools.

Если ты нуждаешься в большем количестве помощи, или что-то из кода скажи мне это и я отвечаю тебе часть, в которой ты нуждаешься, но с этим ты был бы должен мочь делать это быстрым.

2
ответ дан 24.11.2019, 13:02
  • 1
    Привет @Awes0meM4n. и #161; Желанный в Стакк Оверфлов в espaГ±ol ! Quiz и # 225; s твой ответ podr и # 237; когда немного м и # 225; s заверши, если ты добавишь пример c и # 243; я говорю, с которым est и # 225; s объясняя. и #191; Podr и # 237; схвати издавать вопрос показывая alg и # 250; n конкретный случай? Podr и # 225; s находить м и # 225; s informaci и # 243; n в CГіmo отвечать . – Mariano 20.10.2016, 09:55
  • 2
    Уже - в и # 241; adido то, что ты предложил мне. Я надеюсь, что сейчас остается м и # 225; s просвет. – Awes0meM4n 21.10.2016, 22:31
  • 3
    @Awes0meM4n Привет друг:) пример, который ты показал мне, не является конкретным проблема, издайте мой вопрос, напечатанный скажи себе и # 241; или формуляра, сейчас, когда я хочу Он состоит В том, чтобы Показывать ящик box плавающая, нажав на bot и # 243; n suscripci и # 243; n показывая сообщение спасибо за suscripci и # 243; n, но только, если электронная почта - v и # 225; lido, или если я не существовал, и # 243; alg и # 250; n ошибка, сейчас в скажи себе и # 241; или формуляра suscripci и # 243; n в ней и #215; мочь скрывать ящик suscripci и # 243; n, другая тема состояла в том, чтобы избегать того, чтобы ящик появился, если пользователь уже я подписал, и # 243; и #233; sto быть и # 237; чтобы создавать cokiee. – May 22.10.2016, 15:35
  • 4
    Если ты видишь в w3school, как ссылка видит и # 225; s, что tambi и # 233; n существует м и # 233; весь " appendChild (element) ". Когда они дадут bot и # 243; n подписывания ты проверяешь, что это e-mail v и # 225; lido, и если у тебя есть ответ OK subscripci и # 243; n. Потом ты используешь document.getElementById (" formSubscripcion") .appendChild (" formGracias") для в и # 241; adir сообщение будучи благодарен за subscripci и # 243; n и в конце концов removeChild, чтобы снимать то, в чем ты не нуждаешься. – Awes0meM4n 22.10.2016, 17:50

Для того, чтобы div или ящик подписки появился, когда ты сделаешь scroll с jQuery, ты будешь нуждаться в функции scrollTop(): scrollTop

Пример:

$(window).scroll(function() {
    if($(this).scrollTop() >= 1000) {
        $("#suscribe").animate({
            right: 0
        }, 500);
    }
});

С этим примером ты добиваешься того, чтобы, когда продажа браузера будет, я начал scroll до 1000 пикселей или больше, он сделает animate() div с id subscribe. Конечно, если ты используешь оживление с css, ты можешь добавлять прямо класс вместо функции animate().

Также ты можешь добавлять else это, чтобы вновь прятать.

Ящик должен будет быть с position: fixed; с Ваш top/bottom, left/right в CSS, и он рекомендовал бы, чтобы он был вне любого другого элемента, как например, едва открыв этикетку <body> или перед Вашим завершением.

1
ответ дан 24.11.2019, 13:02
  • 1
    Привет @Cheshire;) тема, которую ты показал мне, не точно то, в чем я нуждаюсь cre и # 243; что не фу и # 237; точно я нуждаюсь в мою проблему в конце моего вопроса coment и # 233; который я знаю темы в этом случае, - то, что ты показал мне. То, в чем я нуждаюсь в c и # 243; я говорю, что я напечатал в моем вопросе, он состоит в том, чтобы реализовывать, чем, послав почту или скорее нажав на bot и # 243; n suscripci и # 243; n принимая во внимание, что, если данные - v и # 225; lidos, и если не было какой-либо ошибки, послав, покажите ящик box с сообщением, которое он настроит. – May 23.10.2016, 15:04
  • 2
    Сейчас в ящике, где - формуляр в ней и #215; давать ему функциональность а именно, скрывать ящик, нажав на нее и #215; другая тема была, если пользователь я подписал, и # 243; erar создавать cokiee, чтобы предотвращать, что ящик suscripci и # 243; n появитесь из-за x d и # 237; схвати, если ты можешь наблюдать эту это функциональность, которая выполняет пример ее p и # 225; gina? В conclusi и # 243; n это был мой вопрос. Pod и # 233; s помогать @Cheshire;) – May 23.10.2016, 15:08

Теги

Похожие вопросы