Javascript-форум (https://javascript.ru/forum/)
-   Events/DOM/Window (https://javascript.ru/forum/events/)
-   -   Анимация с скрытием слайдера при прокрутки вверх+привязка к кукам (https://javascript.ru/forum/events/55138-animaciya-s-skrytiem-slajjdera-pri-prokrutki-vverkh-privyazka-k-kukam.html)

mylifegod 15.04.2015 14:18
Анимация с скрытием слайдера при прокрутки вверх+привязка к кукам
 
Всем привет. :victory:
Попался знакомый извращенец:blink: просит сделать такую вещь
1. Первый заход на сайт - слайдер открыт (вне зависимости от страницы).
2. Переход на любую страницу - слайдер закрыт (спрятан)
3. Если сайт уже вверху, при скроллинге вверх слайдер должен сразу появляться (выезжать)
4. При сколлинге вниз - прятаться. :help:


Пункт 1 понятно привязка и проверка к кукам
Пункт 2 связан с пунктом 1
Пункт 3 ВОТ тут проблема не могу понять как сделать и куда копать/
Нашел что то похожее но не то 
<!DOCTYPE HTML>

<html>

<head>
  <title>Untitled</title>
  <meta charset="utf-8">
  <style type="text/css">
  #hid{
    width: 50px;
    height: 50px;
    background: #FF0000;
    opacity: 0;
    position: fixed;
  }
  body{
     height: 1500px;
  }

  </style>
  [JS]
<script src="http://code.jquery.com/jquery-1.9.1.js"></script>
  <script>
 $(document).ready(function(){
        $(window).scroll(function(){
            var bo = $(this).scrollTop();
             var a = $("#hid").css('opacity')
             $("#hid").html(bo);
if ( bo >= 200 && a == 0) {$("#hid").stop().animate({'opacity':'1'},500)};
        if ( bo < 200 && a == 1) {$("#hid").stop().animate({'opacity':'0'},500)};
        })
    })

  </script>[/JS]
</head>

<body>
   <div id="hid">

</div>


</body>

</html>


Прошу помочь куда копать.

mylifegod 16.04.2015 09:58
Пошел по пути scrollTop но видимо надо bind() и на колесико вверх
 
Помогите пожалуйста сделать типо такого-же только с bind()и на колесико вверх при значении 0
$(document).ready(function(){
$(window).scroll(function(){
var bo = $("body").scrollTop();
if ( bo > 50 ) { $("#bigslider").fadeOut();
} else {
$("#bigslider").css("display","block"); };
})
})

рони 16.04.2015 10:10
mylifegod,
немогли бы вы пояснить что такое Переход на любую страницу и Если сайт уже вверху?

mylifegod 16.04.2015 12:27
Продолжаем делать велосипед
 
Переход на любую страницу имеется ввиду внутренний переход.
То есть эмулирую что должно быть:

Я зашел на сайт вижу слайдер
Перешел в любой раздел слайдер спрятан
Но если я на любой странице в самом начале сделаю скрол вверх то слайдер должен появиться и далее когда я скролю вниз слайдер должен прятаться.

Я разделил задачу на 2 этапа

  • первый это сделать что бы слайдер мог показываться при скролинге вверх когда страница только открыта то есть уперлась в вверх делаешь колесико вверх и слайдер должен появиться
  • Второй этап это сделаю куки на первый вход


Пока застрял на 1 этапе. так как начал делать с scrolTop но не получиться сделать так как скрол должен быть минус 0 а это не возможно. Подсказали что надо реализовать с условиями bind() на колесико вверх.:write:

рони 16.04.2015 12:34
mylifegod,
ставите функцию на скролл -- скрол больше чем ранее -- блок показываем -- если меньше скрываем -

или вам нужно скрола нет показываем скрол есть прячем?

mylifegod 16.04.2015 12:42
1 -Зашел - показываем
2 -Перешел на другую страницу прячем
3 -Пролистнул в самый вверх уперся делает скрол вверх и слайдер появился, скролит вниз слайдер прячется.:blink:

рони 16.04.2015 13:15
Scroll спрятать блок при скроле
 
mylifegod,
пункт 2 так и остался для меня загадкой
пункт 3 
<!DOCTYPE HTML>

<html>

<head>
  <title>Untitled</title>
  <meta charset="utf-8">
  <style type="text/css">
  #bigslider{
    width: 100px;
    height: 50px;
    background: #FF0000;
    position: fixed;
    display: none;
  }
  body{
     height: 1500px;
  }

  </style>

<script src="http://code.jquery.com/jquery-1.9.1.js"></script>
  <script>
 $(document).ready(function() {
    var first = localStorage.first;
    !first && $("#bigslider").css({"display" : "block"});
    localStorage.first = 1;
    $(window).scroll(function() {
        var bo = $(this).scrollTop();

        if (bo) {
            $("#bigslider:visible").fadeOut();
        } else {
            $("#bigslider:hidden").fadeIn()
        };
    })

})  </script>
</head>

<body>
   <div id="bigslider">

</div>


</body>

</html>

mylifegod 16.04.2015 17:43
рони спс но я пошел другим путем помоги допилить
$(function () {
  
  var getCookie=function(e){var o=document.cookie.match(new RegExp("(?:^|; )"+e.replace(/([\.$?*|{}\(\)\[\]\\\/\+^])/g,"\\$1")+"=([^;]*)"));return o?decodeURIComponent(o[1]):void 0};
  var setCookie=function(e,o,r){r=r||{};var i=r.expires;if("number"==typeof i&&i){var t=new Date;t.setTime(t.getTime()+1e3*i),i=r.expires=t}i&&i.toUTCString&&(r.expires=i.toUTCString()),o=encodeURIComponent(o);var n=e+"="+o;for(var a in r){n+="; "+a;var v=r[a];v!==!0&&(n+="="+v)}document.cookie=n};
  
  
  / показывать слайдер сразу, или нет /
  var temp1 = getCookie("lapa-slider-first-set");
  if(temp1 != 1) {
    $("#bigslider").show();
    setCookie("lapa-slider-first-set", "1", {expires: 86400 * 90});
  }
  
  
  
  / показать слайдер, когда камера = 0 и скролит вверх /
  
  var firstScroll = 0;
  $(document).scroll(function() {
    var oy = $(document).scrollTop();
    
    if(oy == 0) {
      $(document).scrollTop(1);
      return;
    }
    
    if(firstScroll == 2) {
      if(oy > 1) {
        firstScroll = 0;
        $(document).scrollTop(1);
        $("#bigslider").animate({height: "0px"}, 500, function(){
          $("#bigslider").hide();
        });
        
      }
        
      return;
    }
    
    if(oy > 1) {
      firstScroll = 0;
      return;
    }
    
    if(firstScroll == 0) {
      firstScroll = 1;
      return;
    }
    
    firstScroll = 2;
    $("#bigslider").show();
    $("#bigslider").animate({height: "436px"}, 500, function(){
      $("#bigslider").css("height", "100%");
    });
  });
  
});

Почти все сделал только теперь косяки другие
1 - не корректно работает на safari iphone/ipad (слайдер показывается и тут же прячется )
2 - слайдер при переходе на другую страницу при первой прокрутки не работает вверх а только когда пролистнул вниз а потом вверх
3- Слайдер при переходе на другую страницу при первом всплытии выскакивает без анимации.

рони 16.04.2015 18:54
mylifegod,
посмотрите пост 7 снова 2 раза -- он делает всё что вам нужно, более ничем помочь не могу.

mylifegod 17.04.2015 10:55
последний вариант кода: может кому пригодиться. :) 
$(function () {
  
  var getCookie=function(e){var o=document.cookie.match(new RegExp("(?:^|; )"+e.replace(/([\.$?*|{}\(\)\[\]\\\/\+^])/g,"\\$1")+"=([^;]*)"));return o?decodeURIComponent(o[1]):void 0};
  var setCookie=function(e,o,r){r=r||{};var i=r.expires;if("number"==typeof i&&i){var t=new Date;t.setTime(t.getTime()+1e3*i),i=r.expires=t}i&&i.toUTCString&&(r.expires=i.toUTCString()),o=encodeURIComponent(o);var n=e+"="+o;for(var a in r){n+="; "+a;var v=r[a];v!==!0&&(n+="="+v)}document.cookie=n};
  
  
	$(document).scrollTop(1);
  var temp1 = getCookie("lapa-slider-first-set");
  if(temp1 != 1) {
	$("#bigslider").animate({height: "show"}, 500);
 setCookie("lapa-slider-first-set", "1", {expires: 86400 * 90});
  }
  
  
  
 
  
  var firstScroll = 0;
  $(document).scroll(function() {
    var oy = $(document).scrollTop();
    
    if(oy == 0) {
      $(document).scrollTop(1);
      return;
    }
    
    if(firstScroll == 2) {
      if(oy > 1) {
        firstScroll = 0;
        $(document).scrollTop(1);
        $("#bigslider").animate({height: "hide"}, 500);
        
      }
        
      return;
    }
    
    if(oy > 1) {
      firstScroll = 0;
      return;
    }
    
    if(firstScroll == 0) {
      firstScroll = 1;
      return;
    }
    
    firstScroll = 2;
    $("#bigslider").animate({height: "show"}, 500);
  });
  
});


Часовой пояс GMT +3, время: 02:41.