Форум

mylifegod · #1 (**permalink**) 15.04.2015, 14:18

Всем привет.

Попался знакомый извращенец

просит сделать такую вещь
1. Первый заход на сайт - слайдер открыт (вне зависимости от страницы).
2. Переход на любую страницу - слайдер закрыт (спрятан)
3. Если сайт уже вверху, при скроллинге вверх слайдер должен сразу появляться (выезжать)
4. При сколлинге вниз - прятаться.

Пункт 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 · #2 (**permalink**) 16.04.2015, 09:58

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

рони · #3 (**permalink**) 16.04.2015, 10:10

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

mylifegod · #4 (**permalink**) 16.04.2015, 12:27

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

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

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

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

Второй этап это сделаю куки на первый вход

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

рони · #5 (**permalink**) 16.04.2015, 12:34

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

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

mylifegod · #6 (**permalink**) 16.04.2015, 12:42

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

рони · #7 (**permalink**) 16.04.2015, 13:15

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 · #8 (**permalink**) 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- Слайдер при переходе на другую страницу при первом всплытии выскакивает без анимации.

рони · #9 (**permalink**) 16.04.2015, 18:54

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

mylifegod · #10 (**permalink**) 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);
  });
  
});

Форум

Справочник

Discord чат

Курсы javascript