SitePoint Sponsor

User Tag List

Results 1 to 2 of 2

Hybrid View

  1. #1
    SitePoint Member
    Join Date
    May 2013
    0 Post(s)
    0 Thread(s)

    Scroll fixed element

    Thanks, that seems to have been the problem.

    I have one other question, not sure if I should start a new thread for it, but on the page I have the video background become fixed at a certain scroll point, and use jQuery to change its height:

    		$(document).ready(function() {
          if (!!$('.sticky').offset()) { // make sure ".sticky" element exists
            var stickyTop = $('.sticky').offset().top; // returns number 
            $(window).scroll(function(){ // scroll event
              var windowTop = $(window).scrollTop(); // returns number 
              var width = $(window).width();
              var height = $(window).height();
              if (stickyTop < windowTop && width > 960 ){
                $('.sticky').css({ position: 'fixed', top: 0, marginTop: 20 });
                $('.blog_single').css({ marginLeft: 260 });
                $('#media_video_blog').fadeIn(500).css({ position: 'fixed', height: 100 });
                $('.videoBG').fadeIn(500).css({ height: 95 });
              else {
                $('.sticky').css({ position: 'static', marginTop: 40 });
                $('.blog_single').css({ marginLeft: 20 });  
                $('.hiddenlogo').css({ display: 'none' });  
                $('#media_video_blog').css({ position: 'static', height: 330 });
                $('.videoBG').css({ height: 330 });                                       

    But the transition jumps when you scroll down. Is it possible to have the background video element become fixed at a precise point (100px height) so the transition is smoother? I'm pretty sure it is but not sure how I'd go about doing this..
    Last edited by Paul O'B; May 29, 2013 at 06:27. Reason: Post moved from css forum

  2. #2
    The CSS Clinic is open silver trophybronze trophy
    Paul O'B's Avatar
    Join Date
    Jan 2003
    Hampshire UK
    179 Post(s)
    6 Thread(s)
    I've moved the post to the JS forum.

    Original thread was here.


Posting Permissions

  • You may not post new threads
  • You may not post replies
  • You may not post attachments
  • You may not edit your posts