JSFiddle - React, Tailwind, and code Playground

by Nam CuPeo

JavaScript

<script type='text/javascript'>
//<![CDATA[ đang làm dở
//var mq1 = window.matchMedia("screen and (min-width: 768px)")
//if (mq1.matches){ // if media query matches
//$( document ).ready(function() {
//  console.log( "document ready!" );
//KHAI BÁO BIẾN
  var $stickyb = $('.stickyb');
  var $f = $('.footer');
  var b1 = $stickyb.offset().top;
  var kc = 5;
  var $p1 = $('.p1');
  var $p2 = $('.p2');
  var $p3 = $('.p3');
  var $p4 = $('.p4');



//KHI LOAD XONG TRANG, HIỂN THỊ ĐỂ CHECK B1 VÀ H
   // $p1.text('b1 : '+$stickyb.offset().top +', dính : '+(b1-kc));
    $p1.text('b1 : '+$stickyb.offset().top);
    $p3.text('footer : '+$f.offset().top);
   // $p4.text(', hết dính : '+($f.offset().top - $stickyb.height() - kc));


//KHI RESIZE CỬA SỔ TRÌNH DUYỆT
$(function(){
$(window).resize(function() {
var mq1 = window.matchMedia("screen and (min-width: 768px)")
if (mq1.matches){ 
$('.p1').text($('.stickyb').offset().top);
$('.p3').text($('.footer').offset().top);
$('.stickyb').css({ position: 'absolute', top:$('.stickyb').offset().top});
$p4.text($(window).width());
}
else{
$('.p1').text($('.stickyb').offset().top);
$('.p3').text($('.footer').offset().top);
$('.stickyb').css({ position: 'inherit'});
$p4.text($(window).width());
}
 $(window).scroll();
    });
});
//KHI SCROLL
$(function(){
  $(window).scroll(function(){ 
  var thanhcuon = $(window).scrollTop(); 
var mq2 = window.matchMedia("screen and (min-width: 768px)")
if (mq2.matches) 
    {
    $p1.text('b1 : '+$stickyb.offset().top);
    $p3.text('footer : '+$f.offset().top);
    $p2.text('cuộn : '+thanhcuon);
   // $p4.text(', hết dính : '+($f.offset().top - $stickyb.height() - kc));
  // TH1 : khi thanh cuộn chưa đi qua vị trí top thằng B
  if (thanhcuon < b1 - kc ) {
     $stickyb.css({ position: 'absolute', top:$stickyb.offset().top});
  }         
  // TH2 : khi đã đi qua thì cho dính luôn
 else {
    $stickyb.css({ position: 'fixed', top:kc});
	//Gặp footer, lúc này bỏ dính
  var h = $f.offset().top;  
   ...