• 0

jQuery help with change color and background when scrolling


Question

http://adhesivesquares.com/one-page/

 

Above is the page I'm working on. I would like to know how to at a black background to the top navigation when you start scrolling down. Also the circle nav on the left. Is there a way to change the white to black or any darker color when it's in a different section tag? Can't see it when your in the lighter background. Thanks!

10 answers to this question

Recommended Posts

  • 0
  On 05/03/2014 at 18:52, ACTIONpack said:

It's not work. :-/

My bad, this should work:

$(window).scroll(function(){
    if($(window).scrollTop() > $("#forth").offset().top){
        $('.header').removeClass('darker');
    } else if($( window ).scrollTop() > $("#main").height()){
        $('.header').addClass('darker');
    } else {
        $('.header').removeClass('darker');
    }
});
  • 0
  On 04/03/2014 at 22:02, ACTIONpack said:

http://adhesivesquares.com/one-page/

Above is the page I'm working on. I would like to know how to at a black background to the top navigation when you start scrolling down. Also the circle nav on the left. Is there a way to change the white to black or any darker color when it's in a different section tag? Can't see it when your in the lighter background. Thanks!

Add the navigation inside each section instead with different css bg and or color styling, z-index should do what you want then for you.
  • 0

You made a mess in that page javascript.

 

Separate functions from variables

 

This is dangerous as it can run before the page is fully loaded, ie still is missing <a> tags

var sections = $('a[href^="#"]');

Change it to this to avoid it

var sections;

$( document ).ready(function() {
    sections = $('a[href^="#"]');
});

To answer the original question, add this to the script and create a reference in CSS to "darker" with the color you want

$( window ).scroll(function() {
  if ($( window ).scrollTop() == 0) {
    $('.header').removeClass('darker');
  } else {
    $('.header').addClass('darker');
  }
});

Edit: accidentally a copy paste

  • Like 1
  • 0

If you want the bg color of the header to exactly change at the point where the background changes you can do this:

http://jsfiddle.net/bmGRP/6/

 

Keep in mind that css hover on any element inside these header would look bad since you hover only the top or the bottom half of each header :/

And also inputs would look like being clipped half way, this can be fixed with jquery though.

 

So if you only got a few links it's doable and maybe even looking cool but if you got a complex header with multiple types of input elements just ignore this post ^^

  • 0
  On 04/03/2014 at 22:49, nelsontb said:

You made a mess in that page javascript.

 

Separate functions from variables

 

This is dangerous as it can run before the page is fully loaded, ie still is missing <a> tags

var sections = $('a[href^="#"]');

Change it to this to avoid it

var sections;

$( document ).ready(function() {
    sections = $('a[href^="#"]');
});

To answer the original question, add this to the script and create a reference in CSS to "darker" with the color you want

$( window ).scroll(function() {
  if ($( window ).scrollTop() == 0) {
    $('.header').removeClass('darker');
  } else {
    $('.header').addClass('darker');
  }
});

Edit: accidentally a copy paste

 

 

The darker jquery is not working.

  • 0
  On 05/03/2014 at 13:54, ACTIONpack said:

The darker jquery is not working.

Try: 

$( window ).scroll(function() {
  if ($( window ).scrollTop() > $("#main").height()) {
    $('.header').addClass('darker');
  } else {
    $('.header').removeClass('darker');
  }
});
  • 0

One last question. How to remove the class when it hits the bottom of the page because the background is dark now and hard to read the red. Thanks!

  • 0
  On 05/03/2014 at 16:49, ACTIONpack said:

One last question. How to remove the class when it hits the bottom of the page because the background is dark now and hard to read the red. Thanks!

$( window ).scroll(function() {
  if($( window ).scrollTop() > $("#main").height()) {
    $('.header').addClass('darker');
  } else if($( window ).scrollTop() > $("#forth").offset().top) {
    $('.header').removeClass('darker');
  } else {
    $('.header').removeClass('darker');
  }
});

That should work.

  • 0
  On 05/03/2014 at 17:12, Seahorsepip said:
$( window ).scroll(function() {
  if($( window ).scrollTop() > $("#main").height()) {
    $('.header').addClass('darker');
  } else if($( window ).scrollTop() > $("#forth").offset().top) {
    $('.header').removeClass('darker');
  } else {
    $('.header').removeClass('darker');
  }
});

That should work.

 

It's not work. :-/

This topic is now closed to further replies.
  • Recently Browsing   0 members

    • No registered users viewing this page.
  • Posts

    • Windows Sandbox is awesome and I wish more people knew about it by Usama Jawad Microsoft announced Windows Sandbox way back in 2019. This is a powerful utility that allows you to run a virtualized desktop environment inside your PC, without requiring a dedicated virtual machine (VM) and its associated image files. Windows Sandbox has various advantages over a traditional VM configuration, which makes it an amazing addition to your software toolset. I already published a guide back in 2021 explaining how you can enable Windows Sandbox in your installation. The process is pretty much the same: just check that you have enabled virtualization on your PC (the process may differ for each OEM), enable Windows Sandbox from optional features, restart your PC, and simply launch the environment from Windows Search. The entire process should take less than 30 minutes, in most cases. That said, it is important to note that Windows Sandbox is not offered for Home environments; you need Windows 10/11 Pro, Enterprise, or Education SKUs to leverage it. Since Windows Sandbox is an optional capability in the operating system, many people don't know about it at all. It's essentially a lightweight and temporary desktop environment with the kernel isolated from the host. Since it's ephemeral in nature, you lose all data in Windows Sandbox as soon as you close the environment. The power of Windows Sandbox There are a lot of benefits to using Windows Sandbox. It offers a brand-new and clean Windows environment that you can utilize to test your software or run suspicious .exe files (more on that later) from third-party sources. If you're not sure about opening an untrusted website but still want to open it for some reason, using Microsoft Edge in Windows Sandbox is probably better than running it in your primary environment. But perhaps Windows Sandbox's strengths lie in its backend architecture. The ability to launch a full-fledged OS in a matter of minutes is a huge plus. The process of installing and configuring VMs, and then finding image files for an operating system, can be very daunting, so the streamlined setup for Windows Sandbox easily beats that. In addition, the environment is quite lightweight and consumes a lower amount of RAM than traditional VMs in most scenarios. The fact that Windows Sandbox is ephemeral in nature is also a major advantage from a cybersecurity standpoint. Anything you do inside this environment only stays until that instance is open, and it's isolated from the host, making it quite secure. From Windows 11, version 24H2, you do have the option to retain the instance's resources if you trigger a restart from Windows Sandbox, but you will lose everything if you just close the example in any other way. Finally, Microsoft also offers ways to have more granular control over Windows Sandbox through an XML configuration file and Policy CSP. These have fine-grained configuration settings such as audio and video input, clipboard redirection, mapping folders, networking, and more. So, if you're conscious about running certain services even inside the sandbox, you can simply disable them. Not a silver bullet Despite its plethora of benefits, Windows Sandbox is not a silver bullet that will solve all your problems. For starters, apart from the OS SKU requirement, it has a set of hardware requirements without which you simply can't launch Windows Sandbox. This includes Arm64/AMD64 architecture, 4GB of RAM, 1GB of free space, and at least two CPU cores. These mandates aren't very steep, but they may restrict utilization for some. Next, it is important to remember that while it is better to run untrusted .exe files or open suspicious websites from within Windows Sandbox rather than your primary environment, this is not foolproof. Certain sophisticated varieties of malware may still break free from the sandbox to wreak havoc on your PC, so you should keep that risk in mind anyway. Windows Sandbox offers decent kernel isolation, but malware is evolving all the time, too. In the same vein, do note that some advanced forms of malware can also recognize that they are being run in a virtualized environment. As such, they may alter their behavior dynamically to appear harmless inside the VM and then activate malicious activities as soon as they are transferred over to your host environment. That said, both the aforementioned risks apply to a traditional VM too, so this is just something to know about, not a diss against Windows Sandbox. Also, while it's great that Windows Sandbox is ephemeral, this can be a headache if you are doing extensive testing spread out across days or weeks. You would need to keep your instance up at all times and risk losing your progress at any second. Similarly, it's not possible to run multiple instances of Windows Sandbox, so a customized setup with various environments isn't really feasible. Moreover, inbox apps from the Microsoft Store like Calculator and Notepad aren't supported right now, and there is no Microsoft Store either. Optional Windows features cannot be enabled inside the Sandbox either. Finally, Windows Sandbox only virtualizes your current OS. You can't be running Windows 11, but virtualize Windows 7 inside the sandbox through native methods. Windows Sandbox or a traditional VM? Both Windows Sandbox and traditional VMs offer similar functionalities, but with different selling points. The former is more focused on the lightweight, resource-efficient, and simplified nature of the sandbox environment, while the latter emphasizes more customization options and freedom of use. At the end of the day, whether you end up using Windows Sandbox or a traditional VM depends on your preferences and use case. If you want a persistent environment with more configurability, a traditional VM is the way to go. Still, for almost everything else, Windows Sandbox is a great option, especially due to how quickly you can spin it up. A good rule of thumb would be to give Windows Sandbox a go first, find out in a few minutes if it meets your requirements, and switch to a traditional VM installation if it doesn't. Windows Sandbox is a very handy utility overall, and it's just a shame that not many people know about it due to it being an optional feature that you need to manually enable.
    • Windows 11 is getting a useful new audio feature by Taras Buria Photo: phamtu1509 Windows 11, in its current form, does not offer a quick and easy way to play audio over more than one device. If you have a bunch of audio devices connected and you want to play music on all of them, you have to tinker with third-party software to make it work. Apparently, Microsoft wants to change that with a new feature coming soon to Windows 11. @phantomofearth, the ever-giving source of Windows insights, discovered that the latest Windows 11 preview builds have a hidden toggle in quick settings that lets you share audio to multiple devices with just a few clicks. All it takes is clicking "Shared Audio" in the control center, selecting two or more available devices, and pressing "Share." As usual, there are no official announcements yet, so details about this feature remain unknown. Still, you can probably expect the new shared audio feature to make it to a Windows 11 preview build in the near future. In other Windows Insider news, Microsoft recently revealed that one of the recent taskbar changes was pulled from the operating system due to negative feedback. The company experimented with a simplified taskbar tray area, but later decided to nuke it because people did not like it. Still, there are plenty of other features coming soon to Windows 11. Check out our recent top 10 list here. Hopefully, all of them will make it to the Stable channel soon.
    • Chinese? It sounds extremely dangerous. I’ll reconsider buying a Meta Quest 3.
    • - What's your salary? Is it more than $100k a year? - Nah, it's $100 mil a year.
    • Compared to my ear buds which are the size of a matchbox, cover a much broader frequency range, and work everywhere without setup? Yeah, still not buying this as a replacement.
  • Recent Achievements

    • First Post
      nobody9 earned a badge
      First Post
    • One Month Later
      Ricky Chan earned a badge
      One Month Later
    • First Post
      leoniDAM earned a badge
      First Post
    • Reacting Well
      Ian_ earned a badge
      Reacting Well
    • One Month Later
      Ian_ earned a badge
      One Month Later
  • Popular Contributors

    1. 1
      +primortal
      505
    2. 2
      ATLien_0
      207
    3. 3
      Michael Scrip
      206
    4. 4
      Xenon
      138
    5. 5
      +FloatingFatMan
      112
  • Tell a friend

    Love Neowin? Tell a friend!