jquery - How to create a Facebook-like sticky bar -


here check video see mean (video)

now notice left bar when scroll. when scroll bottom of bar, bar becomes sticky, , no matter how far scrolled, scroll bar scrolls until reaches top of bar again.

so far, did come sticky bar, want if scroll bar scrolls until reaches top facebook style.

this code far

function stickdown($el, margin, position){      var elpos = $el.offset().top + $el.height() + margin;      $(window).scroll(function(){         var wins = $(window).scrolltop();         var winh = $(window).height();          if(wins + winh > elpos)             $el.attr('style', 'position:fixed;bottom:'+margin+'px;top:auto;');         else             $el.attr('style', 'position:'+position+';');             })  }  $(document).ready(function(){     stickdown($('div#bar'), 10, 'relative'); })

i have figured out. here new code

var winscrtop = 0, oldscrtop = 0; $(window).scroll(function(){     winscrtop = $(this).scrolltop();     winh = $(this).height();     $bar = $('div#bar');     bartop = $bar.offset().top;     barh = $bar.height();     margin = 10;     scrh = winscrtop + winh;     topmar = bartop - winscrtop;     allbar = bartop + barh + margin;     if(winscrtop > oldscrtop){         if(scrh > allbar && topmar < 100){             $bar.css({                 position:'fixed',                 top: topmar+'px'             })         } else {             $bar.css({                 position:'absolute',                 top: bartop+'px'             })         }     } else {         if(scrh > allbar){             nin = winscrtop - bartop;             $bar.css({                 position:'absolute',                 top: nin+'px'             })         }         if(topmar > 99){             $bar.css({                 position:'fixed',                 top: '100px'             })         }     }     oldscrtop = winscrtop; })

Comments

Post a Comment

Popular posts from this blog

html - How to custom Bootstrap grid height? -

why bootstrap grid has height 591.067 ? did height came ? .main-post { padding: 20px; background-color: #fff; border: 1px solid #d8d8d8; margin-bottom: 100px; } .main-post .post-categories { margin-bottom: 10px } .main-post h3 { margin: 0 0 10px; color: #777; letter-spacing: -1px; font-weight: bold } .main-post .post-author, .main-post .post-date, .main-post .post-comments { font-size: 12px } .main-post img { display: block; margin: 10px 0; } .main-post .post-summary { line-height: 1.7; color: #888 } .main-post { color: #999 } <div class="col-sm-6"> <div class="main-post"> <h3 class="post-title"> <a href="#"> post title </a> </...
Read more

javascript - pass values from mssql to views in node -

being new node js , javascript . have been trying find solution problem . this app.js file var express=require ('express'); var bodyparser = require('body-parser'); var path = require ('path'); var sql = require('mssql'); var app = express(); const config = { user: 'sa', password: 'password', server: 'localhost\\sqlexpress', // can use 'localhost\\instance' connect named instance database: 'pcgdb', options: { encrypt: false // use if you're on windows azure } }; const request = new sql.request() //view engine app.set('view engine', 'ejs'); app.set('views', path.join(__dirname, 'views')) app.use(bodyparser.json()); app.use(bodyparser.urlencoded({extended: false})); app.get('/',function(req,res){ res.render('index') }); app.get('/new_project', function(req, res) { function(data,err){ ...
Read more

python - Getting 405 error while trying to download nltk data -

when try below code python -c "import nltk; nltk.download('punkt'); nltk.download('averaged_perceptron_tagger'); nltk.download('maxent_treebank_pos_tagger'); nltk.download('wordnet')" the console says [nltk_data] error loading punkt: http error 405: not allowed. [nltk_data] error loading averaged_perceptron_tagger: http error 405: [nltk_data] not allowed. [nltk_data] error loading maxent_treebank_pos_tagger: http error 405: [nltk_data] not allowed. [nltk_data] error loading wordnet: http error 405: not allowed. this caused down-age of github raw file link. meanwhile stop-gap solution manually download file: path_to_nltk_data=/home/username/nltk_data/ wget https://github.com/nltk/nltk_data/archive/gh-pages.zip unzip gh-pages.zip mv nltk_data-gh-pages/ $path_to_nltk_data we're working on finding alternative data , model downloading. meanwhile, @everyone please check script(s) , make sure you're not...
Read more