Javascript.RU

Создать новую тему Ответ
 
Опции темы Искать в теме
  #1 (permalink)  
Старый 15.04.2015, 14:18
Новичок на форуме
Отправить личное сообщение для mylifegod Посмотреть профиль Найти все сообщения от mylifegod
 
Регистрация: 15.04.2015
Сообщений: 6

Анимация с скрытием слайдера при прокрутки вверх+привязка к кукам
Всем привет.
Попался знакомый извращенец просит сделать такую вещь
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>


Прошу помочь куда копать.
Ответить с цитированием
  #2 (permalink)  
Старый 16.04.2015, 09:58
Новичок на форуме
Отправить личное сообщение для mylifegod Посмотреть профиль Найти все сообщения от mylifegod
 
Регистрация: 15.04.2015
Сообщений: 6

Пошел по пути scrollTop но видимо надо bind() и на колесико вверх
Помогите пожалуйста сделать типо такого-же только с 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
Аватар для рони
Профессор
Отправить личное сообщение для рони Посмотреть профиль Найти все сообщения от рони
 
Регистрация: 27.05.2010
Сообщений: 33,064

mylifegod,
немогли бы вы пояснить что такое Переход на любую страницу и Если сайт уже вверху?
Ответить с цитированием
  #4 (permalink)  
Старый 16.04.2015, 12:27
Новичок на форуме
Отправить личное сообщение для mylifegod Посмотреть профиль Найти все сообщения от mylifegod
 
Регистрация: 15.04.2015
Сообщений: 6

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

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

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

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


Пока застрял на 1 этапе. так как начал делать с scrolTop но не получиться сделать так как скрол должен быть минус 0 а это не возможно. Подсказали что надо реализовать с условиями bind() на колесико вверх.
Ответить с цитированием
  #5 (permalink)  
Старый 16.04.2015, 12:34
Аватар для рони
Профессор
Отправить личное сообщение для рони Посмотреть профиль Найти все сообщения от рони
 
Регистрация: 27.05.2010
Сообщений: 33,064

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

или вам нужно скрола нет показываем скрол есть прячем?
Ответить с цитированием
  #6 (permalink)  
Старый 16.04.2015, 12:42
Новичок на форуме
Отправить личное сообщение для mylifegod Посмотреть профиль Найти все сообщения от mylifegod
 
Регистрация: 15.04.2015
Сообщений: 6

1 -Зашел - показываем
2 -Перешел на другую страницу прячем
3 -Пролистнул в самый вверх уперся делает скрол вверх и слайдер появился, скролит вниз слайдер прячется.
Ответить с цитированием
  #7 (permalink)  
Старый 16.04.2015, 13:15
Аватар для рони
Профессор
Отправить личное сообщение для рони Посмотреть профиль Найти все сообщения от рони
 
Регистрация: 27.05.2010
Сообщений: 33,064

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>

Последний раз редактировалось рони, 16.04.2015 в 18:59.
Ответить с цитированием
  #8 (permalink)  
Старый 16.04.2015, 17:43
Новичок на форуме
Отправить личное сообщение для mylifegod Посмотреть профиль Найти все сообщения от mylifegod
 
Регистрация: 15.04.2015
Сообщений: 6

рони спс но я пошел другим путем помоги допилить
$(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
Аватар для рони
Профессор
Отправить личное сообщение для рони Посмотреть профиль Найти все сообщения от рони
 
Регистрация: 27.05.2010
Сообщений: 33,064

mylifegod,
посмотрите пост 7 снова 2 раза -- он делает всё что вам нужно, более ничем помочь не могу.
Ответить с цитированием
  #10 (permalink)  
Старый 17.04.2015, 10:55
Новичок на форуме
Отправить личное сообщение для mylifegod Посмотреть профиль Найти все сообщения от mylifegod
 
Регистрация: 15.04.2015
Сообщений: 6

последний вариант кода: может кому пригодиться.
$(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);
  });
  
});
Ответить с цитированием
Ответ



Опции темы Искать в теме
Искать в теме:

Расширенный поиск


Похожие темы
Тема Автор Раздел Ответов Последнее сообщение
Как избежать полосы прокрутки при анимации Bizon4ik Общие вопросы Javascript 4 21.06.2014 13:51
Анимация при прокручивание скролла lionman jQuery 1 13.05.2014 09:10
При прокрутки скроллинга выделается текст в ie Nailya jQuery 8 15.06.2013 01:05
При вставке в поле по событию, страница съезжает вверх ingwarr jQuery 2 10.05.2012 17:37
Скролл вверх при клике ie6/7/8 dr_gluk jQuery 0 21.03.2012 11:12