X   Сообщение сайта
(Сообщение закроется через 3 секунды)



 

Здравствуйте, гость ( Вход | Регистрация )

Открыть тему
Тема закрыта
> Скользящий блок на javascript (маалюсенькая помощь)
zakaznik
zakaznik
Topic Starter сообщение 12.2.2013, 10:06; Ответить: zakaznik
Сообщение #1


↑↑↑ Цель ↑↑↑
******

Группа: Active User
Сообщений: 1842
Регистрация: 17.3.2010
Поблагодарили: 394 раза
Репутация:   51  


Ребята, помогите, пожалуйста...

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

имеется скрипт, который делает меню скользящим:

Развернуть/Свернуть
<script type="text/javascript">
$(function() {
var TopOld = $("#fixed").offset().top;
var MaxBottom = $("#dashboard").offset().top - parseInt($("#fixed").height()); //&&
var Delta = 19; //начало движения не доходя до верха;
var Busy = false; //Занят обработкой;



$(window).scroll(function() {

if ( Busy ) { return false;}

Busy = true; // Занят;
var ThisTop = $("#fixed").offset().top;
var Scroll = $(window).scrollTop();

if (Scroll > (TopOld-Delta) && ThisTop < MaxBottom ){
$("#fixed").addClass('Fixed');
} else $("#fixed").removeClass('Fixed');

if (Scroll > MaxBottom) $("#fixed").removeClass('Fixed');

Busy = false; //Освободился

});
});
</script>


fixed - это id дива, в котором находится меню
dashboard - это id дива, который ограничивает скольжение fixed, т.е. fixed будет скользить только до дива dashboard.

В моем случае при достижении dashboard див fixed и меню исчезает... (т.е. открепляется и опять вверху страницы становится)....
как сделать, чтобы при достижении dashboard див fixed просто фиксировался, оставался на месте? Т.е., чтобы меню не исчезало, а просто останавливалось?

P.S. Для работы так же подключаем стили на страничке:
Развернуть/Свернуть
<style>




#fixed {

position: absolute;
z-index:1000;

}

#fixed.Fixed {
position: fixed;
z-index:1000;
top:19px;
transition-property:top;
-webkit-transition-property:top;
-moz-transition-property:top;
-o-transition-property:top;
-ms-transition-property:top;

transition-duration: 0.4s;
-webkit-transition-duration: 0.4s;
-moz-transition-duration: 0.4s;
-o-transition-duration: 0.4s;
-ms-transition-duration: 0.4s; /* IE9+ */
}</style>



Сообщение отредактировал zakaznik - 12.2.2013, 10:13


--------------------
0
Вернуться в начало страницы
 
Ответить с цитированием данного сообщения
Ortero
Ortero
сообщение 12.2.2013, 10:40; Ответить: Ortero
Сообщение #2


\m/_ _\m/
******

Группа: Active User
Сообщений: 1890
Регистрация: 23.2.2012
Поблагодарили: 837 раз
Репутация:   99  


Как вариант можете попробовать скрипт из второго сообщения темы http://www.maultalk.com/topic132958.html


Сообщение отредактировал Ortero - 12.2.2013, 10:50


--------------------
Бегет - просто хороший хостинг, который еще и ssl-сертификат бесплатно дает.
Вернуться в начало страницы
 
Ответить с цитированием данного сообщения
zakaznik
zakaznik
Topic Starter сообщение 12.2.2013, 10:54; Ответить: zakaznik
Сообщение #3


↑↑↑ Цель ↑↑↑
******

Группа: Active User
Сообщений: 1842
Регистрация: 17.3.2010
Поблагодарили: 394 раза
Репутация:   51  


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


--------------------
Вернуться в начало страницы
 
Ответить с цитированием данного сообщения
tszyan
tszyan
сообщение 12.2.2013, 13:01; Ответить: tszyan
Сообщение #4


Участник
***

Группа: User
Сообщений: 207
Регистрация: 28.1.2013
Из: Москва
Поблагодарили: 110 раз
Репутация:   27  


Скрипт страшен и глючен, но если хотите исправить именно его, то примерно так:
<script type="text/javascript">
    $(function() {
        var TopOld = $("#fixed").offset().top;
        var MaxBottom = $("#dashboard").offset().top - parseInt($("#fixed").height());
        var Delta = 19;
        var Busy = false;

        $(window).scroll(function() {

            if (Busy)
                return false;

            Busy = true;
            var ThisTop = $("#fixed").offset().top;
            var Scroll = $(window).scrollTop();

            if (Scroll > (TopOld - Delta) && ThisTop < MaxBottom)
                $("#fixed").addClass('Fixed');
            else
                $("#fixed").removeClass('Fixed').css({top: ThisTop});

            if (Scroll < MaxBottom)
                $("#fixed").css({top: 0});
                    
            if (Scroll > MaxBottom)
                $("#fixed").removeClass('Fixed');
                    
            Busy = false;

        });
    });
</script>


Сообщение отредактировал tszyan - 12.2.2013, 13:03
Вернуться в начало страницы
 
Ответить с цитированием данного сообщения
zakaznik
zakaznik
Topic Starter сообщение 12.2.2013, 14:17; Ответить: zakaznik
Сообщение #5


↑↑↑ Цель ↑↑↑
******

Группа: Active User
Сообщений: 1842
Регистрация: 17.3.2010
Поблагодарили: 394 раза
Репутация:   51  


tszyan, отписал в ЛС, у вас некий недочет имеется)


--------------------
Вернуться в начало страницы
 
Ответить с цитированием данного сообщения
tszyan
tszyan
сообщение 12.2.2013, 14:31; Ответить: tszyan
Сообщение #6


Участник
***

Группа: User
Сообщений: 207
Регистрация: 28.1.2013
Из: Москва
Поблагодарили: 110 раз
Репутация:   27  


(zakaznik @ 12.2.2013, 14:17) *
tszyan, отписал в ЛС, у вас некий недочет имеется)

Точнее у Вас в посте не приведена верстка. А гадать что у Вас в ней — дело неблагодарное. А получить что-то универсальное из этого скрипта — трудно.

Сообщение отредактировал tszyan - 12.2.2013, 14:33


Поблагодарили: (1)
Вернуться в начало страницы
 
Ответить с цитированием данного сообщения
zakaznik
zakaznik
Topic Starter сообщение 13.2.2013, 7:18; Ответить: zakaznik
Сообщение #7


↑↑↑ Цель ↑↑↑
******

Группа: Active User
Сообщений: 1842
Регистрация: 17.3.2010
Поблагодарили: 394 раза
Репутация:   51  


Проблема решена


--------------------
Вернуться в начало страницы
 
Ответить с цитированием данного сообщения
falken
falken
сообщение 13.2.2013, 12:55; Ответить: falken
Сообщение #8


online
*******

Группа: Ex-Moderator
Сообщений: 3742
Регистрация: 23.3.2011
Поблагодарили: 3986 раз
Репутация:   361  


Закрыто по просьбе ТС.
Вернуться в начало страницы
 
Ответить с цитированием данного сообщения
Открыть тему
Тема закрыта
1 чел. читают эту тему (гостей: 1, скрытых пользователей: 0)
Пользователей: 0


Свернуть

> Похожие темы

  Тема Ответов Автор Просмотров Последний ответ
Открытая тема (нет новых ответов) Веб-разработка (HTML5, CSS3, JavaScript, jQuery, Ajax, PHP)
18 qpPeW 3355 Вчера, 13:32
автор: qpPeW
Открытая тема (нет новых ответов) Нужна помощь в активации аккаунта AdSense
8 dimaguru 2288 11.12.2017, 17:43
автор: RICHHost
Открытая тема (нет новых ответов) Адаптивный блок Adsense не подстраивается
3 Konark 764 30.11.2017, 7:48
автор: Nell
Открытая тема (нет новых ответов) Нужна помощь с задачами по SEO
Звучит так себе конечно, однако очень нужна ваша помощь!!!
10 another_way 1474 25.11.2017, 13:35
автор: Bel_Ami
Открытая тема (нет новых ответов) envato market помощь в покупке
1 wagan 597 12.11.2017, 22:23
автор: EvilGomel


 



RSS Текстовая версия Сейчас: 13.12.2017, 12:04
Дизайн