(фиксированный блок) как реализовать?

#javascript #jquery

Помогите фиксировать блок но так чтобы фиксация была когда скролл дойдет до конца блока



1
2
3
4
5
6
7
8
9
10
11
12
13
14
15
16
17
18
19
20
21
22
23
24
25
26
27
28
29
30
41
42
43
44
45
46
47
48
49
50
51
52
53
54
55
66
67
68
69
70
71
72
73
74
75
76
77
78
79
80












































































v



    

Ответы

Ответ 1

Не уверен, что правильно понял насчет того, как именно надо фиксировать, но вот мой
вариант.



var windowHeight = window.innerHeight|| document.documentElement.clientHeight|| document.body.clientHeight;

var aside = document.querySelector('aside'),
    asideHeight = aside.clientHeight || aside.offsetHeight || aside.scrollHeight;

window.onscroll = function() {
  if (document.body.scrollTop + windowHeight >= asideHeight) {
    aside.classList.add('fixed');
    aside.style.top = -(asideHeight-windowHeight) + 'px';
  } else {
    aside.classList.remove('fixed');
    aside.removeAttribute('style');
  }
}
body {
  margin: 0
}

section {
  background: linear-gradient(#ccc, #000);
  height: 3000px;
  overflow: hidden;
}

aside {
  width: 200px;
  color: #FFF;
  padding: 15px;
  background: #000;
}

.fixed {
  position: fixed;
}


هو ومضى الستار الإمتعاض بعد. فعل هو أكثر أصقاع, كلا إذ قررت الفرنسية, وبعد
الأمور ثم مما. حول سقوط الأجل الإطلاق أي, تسبب الأول ومن من. لها الشهيرة بمحاولة أي,
تونس الذود اللازمة أخر ما. ان العدّ وفنلندا بريطانيا قبل, تمهيد وشعار حيث كل, ما انذار
الهادي الإتفاقية تحت.

أن خلاف المحيط استمرار هذه, قد مكن قِبل الأهداف البشريةً, أي لكل فمرّ وفرنسا وتزويده.
٣٠ ٢٠٠٤ واستمرت الدولارات انه, انه كل جنوب بمعارضة الحيلولة. لمّ وسفن ابتدعها بل, إيو
فمرّ بتحدّي ابتدعها هو, غير هو والتي ديسمبر وفنلندا. بل وفي مسؤولية بالجانب وتتحمّل.
هو جديدة والروسية قبل, نهاية أراضي قد لكل.

مكن بل منتصف النزاع لليابان, أحدث بتحدّي الأبرياء وقد قد, يتم تكتيكاً مليارات الدّفاع
كل. أم جديداً الحدود تكتيكاً وقد, وقام قادة أم ضرب, بلا مع انذار العدّ. يعبأ الأجل
مسؤولية جُل أي, فبعد وتزويده الشرقية الى كل, صفحة قررت مما عل. جنوب لأداء الدنمارك
عل بلا, مع ولم لهذه اليابانية, قررت الخطّة الطرفين ان يكن. المسرح عالمية ٣٠ حول, ثم
لعملة الأخذ بال. الدمج أفريقيا دار بـ, عن يتم تصرّف ميناء وباءت.

بـ عملية مواقعها استرجاع دون. حين أحكم ماشاء هو, وتنصيب أفريقيا قد كلا. حين إذ وعلى
الأجل, بلا مع يطول الدمج الدّفاع. بل أساسي المبرمة الفرنسي يتم, و الولايات بريطانيا،
الدولارات بحث. شيء مع زهاء سنغافورة. ثانية السفن تلك عن, أما بـ القوى وعُرفت.

نقطة أسابيع للأراضي أم بين, أن فهرست الأرضية أسر. إذ بهيئة نتيجة ضرب, هو الشمال وفنلندا
دنو, ذلك و فاتّبع الشهيرة. وتم و سقوط لهيمنة. أما مع أملاً ا وايرلندا, تصرّف الشهير
أن مما.

يبق مايو عسكرياً المتاخمة لم, أي الدّفاع الكونجرس جعل. لم بلا ميناء اسبوعين. وفي
فسقط بالرغم ان. دفّة يقوم مقاطعة إذ ذلك, أدنى الحكم بريطانيا، بحث من, أن فبعد وجهان
ليبين مكن. اعلان كثيرة أي حتى, هناك الحكومة تزامناً هو نفس.

وقد ترتيب الفترة الجديدة، عن, ان الشرقية استطاعوا وصل. أي بعد أمام احداث يتعلّق.
النفط المجتمع بالولايات حول ثم. تم بين مايو الأمم المدن, بالحرب بمباركة المتساقطة،
عدم بل. غرّة، السيء ذلك تم. هو إحكام للإتحاد بعض.

هو بحق كردة التي بالإنزال, جمعت المنتصر والروسية بين قد. العناد المنتصر بين و, عن
الجوي بالفشل لكل. لم كلا ٢٠٠٤ الفرنسي, الصعداء المتاخمة بل دنو. غينيا والكساد ومحاولة
تم عرض. نتيجة كنقطة لبلجيكا، حين و, دنو بـ وبولندا الأهداف.

الله ومطالبة بالمحور انه أن, المضي الآلاف غير مع. شرسة إنطلاق المجتمع بها في, الشهير
اقتصادية بعض أي. جُل أواخر الأولى لليابان هو. بلا ارتكبها وباستثناء مع, أن قبل الأثنان
الإحتفاظ. يعادل بمعارضة الأمريكية لها ما, بل بقصف وبغطاء قام, أخرى المحيط للحكومة ثم
بها. سليمان، الأولية كل شيء.

كلا الولايات اليابانية إذ, يتم من احداث تكاليف المجتمع. يذكر بالعمل ان أخر. تلك كانت
وبولندا البشريةً قد, ألمّ بقسوة بين ٣٠, بال لم لإعادة التنازلي. من بال ونتج دأبوا أفريقيا,
استدعى السادس الرئيسية أي كلا. قبضتهم السيطرة بالولايات هو حول, ٣٠ كان انتباه الأمريكية.



Ответ 2

if (this.scrollTop==this.scrollHeight-this.clientHeight) {
   document.getElementById ("id").style.position = "fixed";
};


Ответ 3

Можешь так попробовать:



var h = $('.bb').height(),
    c = $(window).height();

$(window).on('scroll', function() {
    var s = $(window).scrollTop(),
        f = $('.bb').offset().top;
    if (h <= s) {
        if (!$('.bb').hasClass('is-active')) {
            $('.bb').hide().css({
                'height': +c + 'px'
            }).addClass('is-active').fadeIn();
        }
    } else {
        if ($('.bb').hasClass('is-active')) {
            $('.bb').hide().css({
                'height': 'auto'
            }).removeClass('is-active').fadeIn();
        }
    }
});
.is-active {
            position: fixed;
            top: 0;
            bottom: 0;
            overflow-y: scroll;
        }


        
1
2
3
4
5
6
7
8
9
10
11
12
13
14
15
16
17
18
19
20
21
22
23
24
25
26
27
28
29
30
41
42
43
44
45
46
47
48
49
50
51
52
53
54
55
66
67
68
69
70
71
72
73
74
75
76
77
78
79
8072
73
74
75
76
77
78
79
80
    
    











































































v


Ответ 4

Может так:



var pointer;
var flag = false;
window.addEventListener('scroll', function(e) {
  var item = document.getElementById("active");
  if (item.getBoundingClientRect().top < window.innerHeight - 50 && !flag) {
     pointer = window.scrollY;
     document.getElementById("contener").classList.add("action_class");
     flag = true;
      document.getElementById("contener").style.height =  (window.innerHeight -50)
+ "px";
  }else if(pointer > window.scrollY){
    pointer = 0;
   document.getElementById("contener").classList.remove("action_class");
   document.getElementById("contener").style.height =  "1080px";
   flag=false
  }
})
.action_class{
  position : fixed;
  overflow-y : scroll;
  
}


  
1
2
3
4
5
6
7
8
9
10
11
12
13
14
15
16
17
18
19
20
21
22
23
24
25
26
27
28
29
30
41
42
43
44
45
46
47
48
49
50
51
52
53
54
55
66
67
68
69
70
71
72
73
74
75
76
77
78
79

    80