Difference between revisions of "Team:NU Kazakhstan/Project Timeline"
| Line 33: | Line 33: | ||
height: 20px; | height: 20px; | ||
z-index: 400; | z-index: 400; | ||
| + | } | ||
| + | .sticky-content{ | ||
| + | padding: 10px; | ||
| + | } | ||
| + | |||
| + | .sticky-content.fixed{ | ||
| + | position: fixed; | ||
| + | top: 0; | ||
| + | left: 0; | ||
| + | right: 0; | ||
} | } | ||
</style> | </style> | ||
| Line 54: | Line 64: | ||
<div class="col-md-3"> | <div class="col-md-3"> | ||
<!--BEGIN HEAD--> | <!--BEGIN HEAD--> | ||
| − | <small> | + | <small class="sticky-content fixed"> |
<div id="container"> | <div id="container"> | ||
<div id="accordion"> | <div id="accordion"> | ||
| Line 540: | Line 550: | ||
}); | }); | ||
| + | var StickyElement = function(node){ | ||
| + | var doc = $(document), | ||
| + | fixed = false, | ||
| + | anchor = node.find('.sticky-anchor'), | ||
| + | content = node.find('.sticky-content'); | ||
| + | |||
| + | var onScroll = function(e){ | ||
| + | var docTop = doc.scrollTop(), | ||
| + | anchorTop = anchor.offset().top; | ||
| + | |||
| + | console.log('scroll', docTop, anchorTop); | ||
| + | if(docTop > anchorTop){ | ||
| + | if(!fixed){ | ||
| + | anchor.height(content.outerHeight()); | ||
| + | content.addClass('fixed'); | ||
| + | fixed = true; | ||
| + | } | ||
| + | } else { | ||
| + | if(fixed){ | ||
| + | anchor.height(0); | ||
| + | content.removeClass('fixed'); | ||
| + | fixed = false; | ||
| + | } | ||
| + | } | ||
| + | }; | ||
| + | |||
| + | $(window).on('scroll', onScroll); | ||
| + | }; | ||
| + | |||
| + | var demo = new StickyElement($('#sticky')); | ||
</script> | </script> | ||
</body> | </body> | ||
</html> | </html> | ||
Revision as of 20:17, 17 October 2018
| Week 5 | May 28 – June 3 |
| Week 6 | June 4 – June 10 |
| Week 7 | June 11 – June 17 |
| Week 8 | June 18 – June 24 |
| Week 9 | June 25 – July 1 |